ReactJS setState 更改不会从父组件传播到子组件[重复]

Posted 2023-02-23

【中文标题】ReactJS setState 更改不会从父组件传播到子组件[重复]

【英文标题】：ReactJS setState changes not propagating from parent to child component [duplicate]

【发布时间】：2016-10-28 23:31:23

【问题描述】：

我有两个具有父子关系的简单 reactjs 组件。子元素包含一个带有 onChange 事件的输入和一个回调到父元素的 setState。当我运行它时， setState 似乎在父组件中工作，但传递给子组件的道具似乎没有更新。有任何想法吗？这是一个代码sn-p：

var FooInput = React.createClass(
  handleInputChange: function(e) 
    this.props.onInputChange(e.target.name, e.target.value);
  ,
  render: function() 
    return (
      <div>
        <input name="foo" value=this.props.foo onChange=this.handleInputChange />
      </div>
    )
  
)

var FooApp = React.createClass(
  getInitialState: function() 
    return 
      foo: 'bar',
    ;
  ,
  handleInputChange: function(key, value) 
    this.setState(key: value);
  ,
  render: function() 
    return (
      <div>
        <FooInput
            foo=this.state.foo
            onInputChange=this.handleInputChange />
      </div>
    );
  
);

在上面的例子中，尽管handleInputChange在FooApp父组件中被触发并且foo通过@传递到子组件中，FooInput子组件中的input值保持为“bar” 987654325@。为什么输入值没有变化以反映新的状态？

【参考方案1】：

您实际上是通过执行this.setState(key: value) 来设置一个名为key 的状态变量。如果你想要一个可变键，你可以使用括号：

handleInputChange: function(key, value) 
    this.setState([key]: value);

或者创建一个新对象。

handleInputChange: function(key, value) 
    const newState = ;
    newState[key] = value;
    this.setState(newState);

【讨论】：

我完全忘记了 javascript 键被解释为字符串文字。非常感谢您指出这一点，这让我发疯了！