javascript - 将新项目添加到状态时反应表附加空行

Question

当我向 React 中的表添加新项目时，我会更新状态，但表不会使用新数据重新渲染。我知道正在传递数据，因为新项目出现在状态中，并且追加了新行，但props.children表中的所有内容都是空的。

这是父组件的简化版本。

class Page extends Component {
  initialState = {
    users: [],
  }

  state = this.initialState

  async componentDidMount() {
    const users = await getDataFromApi()

    this.setState({ users })
  }

  addRow = user => {
    this.setState({ users: [...this.state.users, user] })
  }

  render() {
    return (
      <div>
        <AddModal addRow={this.addRow} />
        <Table data={this.state.users} />
      </div>
    )
  }
}

添加用户模式正在发布到 API（成功）并且

handleSubmit = async event => {
  event.preventDefault()

  const response = await postDataToApi()
  const user = await getNewUser(response)

  addRow(user)
}

所以 API 更新成功，新用户读取成功，数据成功添加到状态，添加的新行具有正确的 ID，但表的 prop children 为空，所以前端只是显示一个空行。

表格组件 - 我在语义 UI 上使用了自定义表格包装器react-table，并且无论哪种方式问题都存在。

class Table extends Component {
  render() {
    const { data } = this.props

    return (
      <DataTable
        data={data}
        meta={column keys and values}
      />
    )
  }
}

class DataTable extends PureComponent {
  state = {}

  componentWillReceiveProps(nextProps) {
    this.setState({ data: nextProps.data, meta: nextProps.meta })
  }
  ...etc

编辑：我没有以正确的格式发送数据。

标签： javascriptreactjsasync-awaitstatecrud