如何解决ReactJS - 当我改变状态时,道具也会改变
我了解到,在 React 组件中,状态可以更改而 props 不能,除非父组件更改它们。很容易理解。所以,现在我正在尝试使用数组创建父组件,将其传递给子组件并将其分配给状态。我添加了另一个道具以更好地理解问题:
import React from "react";
export default function Parent() {
return <Child list={["1","3","4"]} val="val" />;
}
这是我的子组件,它接收道具、管理和渲染它们:
class Child extends React.Component {
state = {
list: this.props.list,val: this.props.val
};
onValueChange = (e,i) => {
let { list } = this.state;
list[i] = e.target.value;
this.setState(() => {
return { list };
});
};
render() {
console.log(this.props.list[0],this.props.val);
return (
<div className="App">
{this.state.list.map((item,i) => {
return (
<input
key={i}
value={item}
onChange={(e) => this.onValueChange(e,i)}
/>
);
})}
<div>
<input
value={this.state.val}
onChange={(e) => {
this.setState({ val: e.target.value });
}}
/>
</div>
</div>
);
}
}
如果我尝试编辑“val”状态(用 val prop 初始化),val prop 不会改变。相反,如果我尝试编辑数组中的一项(用列表道具初始化),状态和道具都会改变!
我预计道具永远不会改变,但似乎如果道具是一个数组,它可以
我做错了什么?
这是这种奇怪行为的代码和盒子:
https://codesandbox.io/s/hidden-darkness-tfoxl?file=/src/App.js
解决方法
以下是我可以推荐的:
onValueChange = (e,i) => {
// Copy the list state
let list = [...this.state.list];
// Make a copy of the item you want to update
let item = {...list [i]};
// Update it
item = e.target.value;
// Put it back into the list
list [i] = item;
// Return the new state
this.setState({list});
};
,
谢谢 Redha,这符合我的预期! 所以答案是:不是直接编辑状态,而是直接复制状态,然后进行编辑,保持道具不变。再次感谢!
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。