ReactJS - 当我改变状态时，道具也会改变答案

【问题标题】：ReactJS - When I change a state, props change tooReactJS - 当我改变状态时，道具也会改变
【发布时间】：2021-03-16 20:05:25
【问题描述】：

我了解到，在 React 组件中，状态可以更改，而道具不能，除非父组件更改它们。很容易理解。所以，现在我正在尝试用一个数组创建一个父组件，将它传递给一个子组件并将其分配给状态。我添加了另一个道具以更好地理解问题：

import React from "react";
   
 export default function Parent() {
   return <Child list={["1", "3", "4"]} val="val" />;
 }

这是我的 Child 组件，它接收、管理和渲染它们：

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

【问题讨论】：

将 props 复制到 state 总体上是一种不好的做法，你应该避免它

标签： arrays reactjs react-props react-state

【解决方案1】：

以下是我可以推荐的：

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});
};

【讨论】：

【解决方案2】：

谢谢 Redha，这符合我的预期！所以答案是：不是直接编辑状态，而是直接复制状态，然后编辑它，保持 props 不变。再次感谢！

【讨论】：