javascript - 根据 props 值设置子数组状态对象

Question

我正在使用钩子(Hook)创建一个 react 应用程序，但我的代码出现了奇怪的行为，我不会将所有代码放在这里，但我会给你一个例子。

const Child = props => {
   const {data} = props;
   const [myData, setMyData] = useState(data);

  const items => myData.map( r => <li> r </li> );

   return ( <ul> { items } </ul> );
}

const Parent = () => {

   return (<div> 
             <Child data={ [1, 2, 3] } 
           </div> );
}

我正在更改父组件发送到子组件的数组。当我向数组添加新元素时，子组件会重新渲染，因此 MyData 等于数组(这是有道理的，因为子组件是通过 props 更改重新渲染的)。如果我从数组中删除一个元素，则子组件将重新渲染，但 myData 不会更改，并且我从数组中删除的元素仍然存在于 myData 中。

为什么当我向数组添加元素时，useState 将数组设置为 myData，但当我删除元素时，即使子组件重新渲染，这似乎不起作用。

我知道这看起来有点愚蠢，你可以问我，为什么你不只使用 Child 组件上的 props 值而不是状态值，这个想法是在 Child 组件上有一个搜索控件，所以我可以对 MyData 进行某种搜索，而不是对 props 值进行搜索(但也许还有另一种方法)。

Answer 1

我认为问题在于你如何使用 Prop 。

当Child渲染时，它从Parent获取props.data。然后，它将data复制到其组件状态作为变量myData。

从这里开始，对 props 的更改可以触发 Child 重新渲染，但 myData 不会通过 useState。这种情况只会发生一次。

如果您正在编写执行热重载的代码(您保存文件并在浏览器中重新加载应用程序)，则可能看起来像是更改发送到 Child 的 props 更新 myData ，但这在生产环境中不会发生。

我的建议:如果您要将 props fork 到 Child 状态，请将 props 视为初始值，而不是 Parent 可以更新的值。

React 文档解释了为什么这是一种反模式:

The problem is that it’s both unnecessary (you can use this.props.color directly instead), and creates bugs (updates to the color prop won’t be reflected in the state).

Only use this pattern if you intentionally want to ignore prop updates.

React constructor docs