将数据传递给子抛出道具数据重复时做出反应答案

【问题标题】：React when pass data to child throw props data duplicate将数据传递给子抛出道具数据重复时做出反应
【发布时间】：2020-06-01 23:06:57
【问题描述】：

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

活动

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 中记录道具 但问题仍然存在

【问题讨论】：

您不能将onChange 事件附加到组件，它充当道具。
这是正确的行为。 Categories 组件被渲染了 2 次（作为道具，category 已更改），第一次在开始时使用 [] 渲染，第二次使用值。
@Deda 道具只是反应的道具。当您将其发送到div 时，它会对其进行预定义处理并以特定方式对其进行绑定。对于自定义组件，您只需将其级联并钻到您想要的位置即可。

标签： javascript reactjs react-native react-redux react-router

【解决方案1】：

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

以初始状态呈现（空）
去获取类别
使用类别重新呈现

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

【讨论】：

谢谢你，我明白你在说什么。但是显示类别数据的最佳方法是什么 const [category, setCategory] = useState(getCategories().then((_categories) => setCategory(_categories))) 或在类别组件中检查道具是否像那样 const categoriesList = []; useEffect(() => { setCategory(props.category.categories); if (category) category.map((cat) => { categoriesList.push({ key: cat.categoryid, obj: , }); }); });
我知道了 const [category, setCategory] = useState({ items: [], isLoaded: false });

【解决方案2】：

我认为你 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))
    ]);
  }

【讨论】：