将数据传递给子项道具数据重复时的反应

Question

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

活动

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} />)

}

和类别组成部分

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

return (<div></div>)
}

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

Answer 1

我认为您handleChange函数应该更新对象数组中的项目，而不能完全更改状态对象

  function handelChange({ target: {name, value} }) {
    setCategory(categories => {
      const categoryIndex = categories.findIndex(pr => pr.id === id);
      const category = categories[categoryIndex];

      return [
        ...categories.slice(0, categoryIndex)),
        {
          ...category,
          [name]: value,
        },
      ...categories.slice(categoryIndex + 1))
    ]);
  }

Answer 2

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

• 具有初始状态（空）的呈现
• 去处类别
• 重新分类

这完全是预期的。该双日志是初始渲染，然后是更新后的状态渲染。记住React是一个高度异步的库。 useEffect不在渲染期间发生，而是在渲染之后发生。每个状态更新也将导致更新，从而导致另一个日志。研究导致React渲染的原因以及生命周期的行为可能会有所帮助。