当我改变状态时,道具也会改变 [英] ReactJS - When I change a state, props change too
本文介绍了当我改变状态时,道具也会改变的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我了解到,在Reaction组件中,状态可以更改,而道具不能,除非父组件更改它们。很容易理解。所以,现在我尝试创建一个带有数组的父组件,将其传递给子组件,并将其赋值给State。为了更好地理解这个问题,我添加了另一个道具:
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不会更改。相反,如果我尝试编辑数组中的一项(用List 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});
};
这篇关于当我改变状态时,道具也会改变的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文