Question

我有一个状态变量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。

onSubmit = () => {
    const newPost = newData // some new data
    this.props.updateFeed(newPost)
  }

updateFeed函数在提交时执行，console.log正在提供更新的数据。但是渲染函数this.state.dataSource.data内部是undefined。我在这里错过了什么？

Answer 1

您在setState调用中执行dataSource: dataSource.data，因此您的render方法中的dataSource.data实际上将访问dataSource.data.data，这可能是未定义的。可以将updatedFeed更改为：

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

确保纯粹的状态。

Answer 2

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

你需要像这样更新状态

data

React状态变量在render方法中是未定义的

2 个答案: