ReactJS：当初始状态来自道具时，状态不会在 onChange 上更新答案

【问题标题】：ReactJS: State does not update upon onChange when initial state is from propsReactJS：当初始状态来自道具时，状态不会在 onChange 上更新
【发布时间】：2019-09-20 16:51:25
【问题描述】：

我有一个表单输入，我将我的值设置为来自我的道具的初始状态。现在我有一个 handleChange 函数，当我尝试输入表单输入时，它确实触发了 onChange，但值根本没有改变。

  handleChange(e){
    this.setState({
      [e.target.name]: e.target.value,
    });
    console.log('handle change', this.state.firstName)
  }

console.log 返回初始状态，即使我在键盘上键入，它仍然返回初始状态。这是我的handleChange()

虽然这是我的初始状态：

    this.state = {
      firstName: this.props.profiles.selectedProfile.first_name
    }

这是我的输入

<Form.Input 
label="First Name"
value={this.state.firstName}
placeholder="Jose"
onChange={this.handleChange}
/>

当我只在状态上声明了一个空字符串但现在我的初始状态来自我的道具时，这有效，它不起作用。

【问题讨论】：

您介意在handleChange 函数中记录e.target.name。另外，您是否在构造函数中绑定了这个handleChange？也可以试试：firstName: this.props.profiles.selectedProfile.first_name || ''

标签： javascript reactjs

【解决方案1】：

您说的是[e.target.name]: e.target.value 或name = value，但您没有发送姓名字段。

这段代码应该可以解决问题。

<Form.Input 
label="First Name"
name='firstName'
value={this.state.firstName}
placeholder="Jose"
onChange={this.handleChange}
/>

您还需要在构造函数中将 handleChange 绑定到 this，我假设您没有这样做。

  constructor(props) {
    super(props)
    this.handleChange = this.handleChange.bind(this)
  }

console.log('handle change', this.state.firstName)不会给你最新的状态值，因为setState是异步的，如果你想获取最新的状态值，使用setState的回调。

【讨论】：

是的，我忘记了名字！！！但我确实在构造函数中绑定了它。谢谢！

【解决方案2】：

我认为你应该使用 this.setState 在 componentDidMount 中设置状态

componentDidMount(){
    this.setState({firstName : this.props.profiles.selectedProfile.first_name});
}

【讨论】：

【解决方案3】：

因为 React 上的 props 是 immutable。

如果你将 props 分配给一个 state，那个 state 也将是不可变的，因为 state 的值是不可变的值。

为了很好理解，我来模拟一下：

var a = 0;
var b;
a = b;
// it means b = a too

如果您更改b，a 也会随之更改。

所以你分配的状态的值是不可变的值，状态就会变成不可变的。

我希望它可以帮助您理解它。更多信息：https://reactjs.org/docs/components-and-props.html

【讨论】：