Javascript 将数据传递给子投掷道具时的反应数据重复

当我将类别列表发送到类别功能组件并记录“道具”数据发送两次时，我将创建活动功能组件并调用名为Categories的子功能组件。第一个是空的，第二个有如下数据

活动

function Activities() {
 const [category, setCategory] = useState([]);

  function handelChange({ target }) {
    setCategory({
      ...category,
      [target.name]: target.value,
    });
  }


  useEffect(() => {
    getCategories().then((_categories) => setCategory(_categories));
  }, []);

 return (<Categories category={category} onChange={handelChange} />)

}

功能活动（）{
const[category，setCategory]=useState（[]）；
函数handelChange（{target}）{
集合类别({
类别
[target.name]：target.value，
});
}
useffect（（）=>{
getCategories（）。然后（（_categories）=>setCategories（_categories））；
}, []);
返回（）
}

和类别组成部分

function Categories(props) {
 console.log(props);

return (<div></div>)
}

功能类别（道具）{
控制台日志（道具）；
返回（）
}

---

我正在尝试将道具记录在useEffect中，但问题仍然存在

我认为您的

handleChange

函数应该更新对象数组中的项，而不是完全更改对象的状态

函数handelChange（{target:{name，value}}）{
设置类别（类别=>{
const categoryIndex=categories.findIndex（pr=>pr.id==id）；
常量类别=类别[类别索引]；
返回[
…categories.slice（0，categoryIndex）），
{
类别
[名称]：值，
},
…类别.切片（类别索引+1））
]);
}

发生这种情况是因为React中的生命周期是如何工作的。这是正确和预期的行为。在加载类别之前，它在初始渲染时是一个空白数组。然后它获取类别，更新状态，并重新渲染，这次是使用类别

• 使用初始状态（空）渲染
• 转到并获取类别
• 使用类别重新渲染

---

这完全是意料之中的。双日志是初始呈现，然后是更新的状态呈现。请记住React是一个高度异步的库。

useEffect

不会在呈现期间发生，而是在呈现之后发生。每个状态更新也会导致更新，从而导致另一个日志。研究导致Reac的原因可能会有所帮助t呈现和生命周期的行为。

您不能将

一旦更改

事件附加到组件，它将作为一个道具。这是正确的行为。

类别

组件呈现了2次（作为道具，

类别

更改），首先在开始时使用

[]

和第二个值。@Deda道具只是反应的道具。当你将它发送到

div

时，它有预定义的处理，并以特定的方式绑定它。对于自定义组件，你只需要将它级联并钻取到你想要的位置。谢谢，我理解你的意思。但是，显示它的最佳方式是什么ay category data const[category，setCategory]=useState（getCategories（）。然后（（_categories）=>SetCategories（_categories）））或在category组件中检查道具是否与const categories List=[]；useEffect（（）=>{setCategory（props.categories.categories））；如果（category）categories.map（（cat）=>{categoriesList.push（{key:cat.categoryid，obj:，}）；}）；}）；我得到了const[category，setCategory]=useState（{items:[]，isLoaded:false}）；