javascript - 为什么更改子组件中的状态(基于 Prop )会影响 Prop ？

Question

可以看demo here .尝试单击“编辑”按钮并更改输入字段的值。

在父组件中，它将一个对象数组传递给它的子组件。在子组件内部，可以将其中一个对象传递到其状态，名为 editedTodo。但是，奇怪的是，当 editedTodo 改变时，prop 也会改变。

这不是我想要的。谁能帮我解决这个问题？

这是 todo 组件:

import React from "react";

export default class extends React.Component {
  state = {
    editedTodo: null
  };

  toggleEditTodo = (todo = null) => {
    this.setState({ editedTodo: todo });
  };

  onChangeTodoText = text => {
    this.setState(prevState => ({
      editedTodo: Object.assign(prevState.editedTodo, { text })
    }));
  };

  submitTodoForm = e => {
    e.preventDefault();
    this.props.saveEditedTodo(this.state.editedTodo);
    this.setState({
      editedTodo: null
    });
  };

  render() {
    const { editedTodo } = this.state;
    const { todos } = this.props;
    return (
      <ul>
        <li>{JSON.stringify(todos)}</li>
        {todos.map(todo => (
          <li key={todo.id}>
            {todo === editedTodo ? (
              <form onSubmit={this.submitTodoForm}>
                <input
                  autoFocus
                  value={editedTodo.text}
                  onChange={e => this.onChangeTodoText(e.target.value)}
                />
                &nbsp;
                <button type="submit">Save</button>
                &nbsp;
                <button type="button" onClick={this.toggleEditTodo}>
                  Cancel
                </button>
              </form>
            ) : (
              <span>
                {todo.text}
                &nbsp;
                <button onClick={() => this.toggleEditTodo(todo)}>Edit</button>
              </span>
            )}
          </li>
        ))}
      </ul>
    );
  }
}

Answer 1

https://codesandbox.io/s/3q1k4m3vm5

这是工作版本。

问题出在 this.setState({ editedTodo: todo }) 上。您正在将 todo 的相同副本从 props 分配给状态。所以它引用的是同一个项目。确保你永远不会直接改变你的 Prop ，这是一种反模式。