Reactjs 传递函数调用以处理嵌套状态更改。我做错了什么？

如果我能理解的话，我相信这里我需要理解的细微差别来自于更新嵌套状态，以及它如何应用于我的示例，这将是非常好的

我尝试了以下代码：

NewNotePage.js

//更新this.state.note.date的位置

class NewNotePage extends React.PureComponent {
  constructor(props) {
    super(props);
    this.state = {
      note: {
        title: "",
        body: "",
        createdAt: null,
        updatedAt: null,
        date:null
      }
    };
    this.handleDate = this.handleDate.bind(this);
    this.handleTime = this.handleTime.bind(this);
  }

  handleDate = date => this.setState({ date })
  handleTime = date => this.setState({ date })

  render() {
    console.log(this.state.note.date)
    const { note } = this.state;

    return (
      <div>
        <PickerDrawer 
        show={this.state.drawerOpen} 
        date={this.state.note.date} 
        handleTime={this.handleTime} 
        handleDate={this.handleDate} />
        {backdrop}
      </div>
    );
  }
}

class PickerDrawer extends React.Component {
  constructor(props) {
    super(props);

  render(props) {
    return (
      <div className={drawerClasses}>
        <MuiPickersUtilsProvider utils={DateFnsUtils}>
          <DatePicker
            label="Due Date"
            value={this.props.date}
            onChange={this.props.handleDate}
            animateYearScrolling
            showTodayButton={true}
            disablePast={true}
          />
          <TimePicker
            label="Time"
            value={this.props.date}
            onChange={this.props.handleTime}
            animateYearScrolling
          />
        </MuiPickersUtilsProvider>
      </div>
    );
  }
}

---

NewNotePage中的console.log（this.state.note.date）抛出null，因为它处于初始状态

您需要首先在处理程序中使用spread操作符复制您的状态：

const currentState = {...this.state};

之后，您可以通过在对象中替换日期来更新日期：

currentState.note.date = event.target.value;

最后，使用此新状态对象再次更新您的状态：

this.setState(currentState);

查看此处的最终代码：

如果将日期选择器上的onChange更改为：

 <DatePicker
        label="Due Date"
        value={this.props.date}
        onChange={(event, x) => {
          this.props.handleDate(event);
        }}
        animateYearScrolling
        showTodayButton={true}
        disablePast={true}
      />

})

您应该能够更新您的状态

然而，我注意到你的状态更新了，但是日期选择器没有

我决定打印PickerDrawer渲染方法中的道具，注意它被调用了两次，并且使用了不同的道具

PickerDrawer |渲染
对象{show:true，date:null，handleDate:function-bound（）}
PickerDrawer |渲染
对象{className:“picker drawer”，close:undefined}

我相信您要查找的是：总之，您应该更新整个状态，而不是状态对象中的一个属性。希望它能有所帮助：）可能重复感谢布鲁诺，尽管老人似乎在尝试不同的东西

handleDate=child=setState（{parent:{child:state}}）

，

handleDate=date=setState（{note:{date:date}}）

我正在尝试使用Elder的方法，这仍然会改变state上的嵌套级别。spread操作符只做一个浅拷贝。@ChaimFriedman true，但对于他的初始状态，它会工作，请在这里查看：是的，它绝对会工作，但是这种方法可能会破坏任何

shouldComponentUpdate

s或任何

PureComponent

s，因为它们比较引用，在您的情况下，引用将保持不变。我将尝试不使用PureComponent和refs的嵌套状态，谢谢Chaim。长老，我非常感谢你把这件事整理好。但是，代码仍然不是Material UI接受的值的目标（无法将其记录在父组件中）。我伪造了我项目的这一部分，所以你可以看到我的错误。要知道，当handleDate和state的日期设置为未嵌套在DatePicker组件中时，DatePicker接受值的目的地，但当它位于index.js/my NewPlan.js中时，它不允许我们选择note.date。很好，你在聊天中所说的&你的答案上最新的

PickerDrawer.js

也有效，为了在child

PickerDrawer.js

中显示状态，在

onChange={（event，x）=>{this.dateHandler（event）；}中创建一个
dateHandler.js

在child

PickerDrawer.js

组件以及

this.props.handleDate（this.state.date）中设置状态。全部完成！
 handleDate = event => {
const currentState = { ...this.state };
currentState.note.date = event;

this.setState(currentState);