当我将道具放入状态时，即使更新了道具，状态也不会更新答案

【问题标题】：When I put props in state, state is not updated even if props is updated当我将道具放入状态时，即使更新了道具，状态也不会更新
【发布时间】：2021-03-31 22:41:33
【问题描述】：

当父组件将一个名为title的props传递给子组件并将props放入子组件的状态时，当父组件的标题改为移动到子组件时，props会更新，但状态不会更新并保留过去的标题。

Props 更新了，但是使用 Props 的 State 没有更新。

父组件更新时如何更新子组件的状态？

constructor() {
        super();
        this.state = {
            title:''
        };
    }

<Child title={this.state.title}/>)}

constructor(props) {
        super(props)
        this.state = {
            title: props.title
        };
    }

【问题讨论】：

构造函数是......好吧......构造，它设置初始值，它不会将道具和状态永久绑定在一起。
你在哪里更新任何东西？您在哪里尝试观察该更新？请提供一个完整且可运行的示例来说明问题。

标签： reactjs

【解决方案1】：

不要在多个位置存储相同的状态；同步它们会很痛苦。相反，将标题和状态设置器函数传递给孩子，例如：

<Child
  title={this.state.title}
  setTitle={title => { this.setState({ title }); }}
/>

并且不要在孩子中保留状态 - 仅使用 title 属性。当您需要从孩子更新时，请调用 setTitle 属性。

【讨论】：

【解决方案2】：

将 props 复制到 state 似乎是多余且反模式的，但如果您需要这样做（出于编辑表单中的详细信息等原因），您可以使用 constructor 将 props 复制到 state并在使用 componentDidUpdate 生命周期方法更改道具的值时更新（有条件地）它：

class Child extends Component {
  constructor(props) {
    super(props);
    this.state = {
      title: this.props.title // Copy
    };
  }

  componentDidUpdate(prevProps, prevState) {
    if (this.props.title !== prevProps.title) {
      this.setState({
        title: this.props.title // Update conditionally when it is changed in props
      });
    }
  }

  render() {
    return <>{this.state.title}</>;
  }
}

【讨论】：

感谢您的回答。最初我想这样做，但我将其设置为 state 因为我希望能够将其编辑为表单的值。在这种情况下有什么解决方法吗？
我希望能够将更改后的标题值从子组件发送到服务器端，而无需更新父组件的值。如果父组件的值改变了，我想强制子组件改变它的值。