如何解决我的组件在不应该更改其道具时
我有一个组件,该组件从父对象的prop中获取一个数组,然后将其设置为状态。然后,我打算修改此数组,以将修改后的prop版本发送回父级。
我很困惑,因为在我修改应用程序中的状态时,我控制台注销了prop对象,尽管该对象从未被该功能所触及,但它同时被修改了。
这是代码的简化版本:
import React,{ useEffect,useState } from 'react';
const ExampleComponent = ({ propObj }) => {
const [stateArr,setStateArr] = useState([{}]);
useEffect(() => {
setStateArr(propObj.arr);
},[propObj]);
const handleStateArrChange = (e) => {
const updatedStateArr = [...stateArr];
updatedStateArr[e.target.dataset.index].keyValue = parseInt(e.target.value);
setStateArr(updatedStateArr);
}
console.log(stateArr,propObj.arr);
return (
<ul>
{stateArr.map((stateArrItem,index) => {
return (
<li key={`${stateArrItem._id}~${index}`}>
<label htmlFor={`${stateArrItem.name}~name`}>{stateArrItem.name}</label>
<input
name={`${stateArrItem.name}~name`}
id={`${stateArrItem._id}~input`}
type="number"
value={stateArrItem.keyValue}
data-index={index}
onChange={handleStateArrChange} />
</li>
)
})}
</ul>
);
};
export default ExampleComponent;
据我了解,propObj
绝不会根据此代码进行更改。不过,它以某种方式反映了组件的stateArr
更新。觉得我疯了。
解决方法
正确更新状态中的
propObj
| stateArr
并返回新的数组引用,但是您忽略了也复制要更新的元素。 updatedStateArr[e.target.dataset.index].keyValue = parseInt(e.target.value);
是状态突变。请记住,每个元素也是对原始元素的引用。
使用功能状态更新并将当前状态映射到下一个状态。当索引匹配时,还将元素复制到新对象中并更新所需的属性。
const handleStateArrChange = (e) => {
const { dataset: { index },value } = e.target;
setStateArr(stateArr => stateArr.map((el,i) => index === i ? {
...el,keyValue: value,} : el));
}
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。