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子级为空，因此前端只是显示一个空行。

表组件-我在语义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

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

将新项目添加到状态时，React表会追加空行

0 个答案: