Javascript React state变量在render方法中未定义

我有一个状态变量

dataSource

，其中包含一些数据

在父组件中，我有以下内容：

updateFeed = newItem => {
    this.setState({ dataSource: this.state.dataSource.data.unshift(newItem) })
    console.log(this.state.dataSource.data)
  }
  render() {
    console.log(this.state.dataSource.data)
    return (
      <React.Fragment>
        <Header />
        <Route
          path="/"
          exact
          component={props => (
            <Feed {...props} feedData={this.state.dataSource.data} updateFeed={this.updateFeed} />
          )}
        />
        <Route path="/profile/:id" exact component={props => <Profile {...props} />} />
      </React.Fragment>
    )
  }

---

updateFeed

函数将在提交时执行，而

console.log

将提供更新的数据。但是在渲染函数

中，this.state.dataSource.data

是

未定义的。我错过了什么
 您在setState调用中执行了
dataSource:dataSource.data
，因此渲染方法中的
dataSource.data
实际上将访问可能未定义的
dataSource.data.data
。可以将
updatedFeed
更改为：

 updateFeed = newItem => {
    this.setState(prev => ({
       dataSource: {
           ...prev.dataSource,
           data: prev.dataSource.data.concat(newItem)
       }
    }));      
  }

这确保了纯状态。
您在setState调用中执行了
dataSource:dataSource.data
，因此呈现方法中的
dataSource.data
实际上将访问可能未定义的
dataSource.data.data
。可以将
updatedFeed
更改为：

 updateFeed = newItem => {
    this.setState(prev => ({
       dataSource: {
           ...prev.dataSource,
           data: prev.dataSource.data.concat(newItem)
       }
    }));      
  }

这确保了一个纯状态。
这是因为以前，
this.state.dataSource
是一个具有key
data
的对象。因此，即使您正在
updateFeed
中设置新值，但在下一行中，状态尚未更新。React以异步方式执行此操作。因此，日志语句显示的是旧数据

您需要像这样更新状态

const dataSource = this.state.dataSource;
dataSource.data.unshift(newItem);
this.setState({ dataSource: dataSource })

这是因为以前，
this.state.dataSource
是一个具有key
data
的对象。因此，即使您正在
updateFeed
中设置新值，但在下一行中，状态尚未更新。React以异步方式执行此操作。因此，日志语句显示的是旧数据

您需要像这样更新状态

const dataSource = this.state.dataSource;
dataSource.data.unshift(newItem);
this.setState({ dataSource: dataSource })

为什么要调用
unshift
？这会改变你的状态，应该避免。我必须在数组前面插入元素。然后只需使用扩展运算符
[newItem，…this.state.dataSource.data]
。如果更改状态，设置状态将无法正常工作。为什么要调用
unshift
？这会改变你的状态，应该避免。我必须在数组前面插入元素。然后只需使用扩展运算符
[newItem，…this.state.dataSource.data]
。如果更改状态，则设置状态将无法正常工作。