ComboSelection MaterialUI ReactJs Api 数据

Question

我是新手，我正在使用材料 ui（组件）组合框来显示来自 API 的选定数据。

这是我的代码：

this.state = { data: [] , dataValue: ''}

componentDidMount() {
    this.props.getAllData().then(data => this.setState({data})}

 render() {
     return (
         <FormControl variant="filled">
         <InputLabel htmlFor="filled-age-native-simple">DATA</InputLabel>
  <Select
   native
   value={this.state.dataValue}
   onChange={this.handleChange('dataValue')}
   input={<FilledInput name="dataValue" id="filled-age-native-simple" />}>
   // Problem solved
  {this.state.data.map(dataV => {
      return (
            <option value={dataV.id}> {dataV.name} </option>
          );
    })}

   </Select>
</FormControl>

每次您选择一个值时，都会为该状态分配一个 id。

通过实现这个，我得到这个错误：

提供给Select 的无效道具children，应为ReactNode。
在 Select（由 Context.Consumer 创建）

有谁知道如何解决这个问题？谢谢

Answer 1

当您初始化状态时 - 您只能使用手头的值来执行此操作，可以这么说。您不能像您尝试那样使用基于承诺的值：

this.state = { data: this.props.getAllData(), dataValue: ''}

其次，当你渲染组件时，你还需要手头的所有数据来渲染。具体来说，您不能这样做：

render() {
    return <el>{this.state.data.then(...

如果您需要在组件中处理异步数据调用，则应使用 componentDidMount 函数（或构造函数）来发起调用。

例如：

componentDidMount() {
    this.props.getMyData().then(data => this.setState({data}) )
}

在调用 setState 时，这将触发您的组件的重新渲染，并可以利用您刚刚存储在 state 中的数据。