时间戳

首页 > 解决方案 > 从 props 值设置子数组状态对象

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

问题描述

我正在使用钩子创建一个反应应用程序，但我的代码出现了一个奇怪的行为，我不打算把我所有的代码都放在这里，但我会给你一个例子。

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 等于数组（这是有道理的，因为子组件是通过道具更改重新渲染的）。如果我从数组中删除一个元素，则子组件将重新呈现，但 myData 不会更改，并且我从数组中删除的元素仍然存在于 myData 中。

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

我知道这看起来有点笨，你可以问我，为什么你不只是在 Child 组件上使用 props 值而不是 state 值，那么想法是在 Child 组件上有一个搜索控件，所以我可以制作某种搜索 MyData 而不是 props 值（但也许还有另一种方法）。

标签： javascriptreactjsreact-hooks

解决方案

useEffect(() => {
    setMyData(data)
},[data])

您的数据将仅加载到状态一次。但是您可以使用 useEffect 处理父组件对数据的更改，useEffect 将在数据更新时更新

有完整的代码

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

    useEffect(() => {
        setMyData(data)
    },[data])

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

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

const Parent = () => {

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

你可以阅读React 使用效果

推荐阅读