Question

我遇到了在select-react Component中表示数据的问题，我已成功通过componentDidMount（）

从服务器端（节点js）获取数据

  componentDidMount(){
      fetch('api/transporationTypes') 
      .then( res => res.json())
      .then(trasnportation => this.setState({trasnportation }, () => console.log(trasnportation)));

    }

但是我无法在React-Select Component中设置加载的数据我在下面尝试了下面这个组件如何使用静态数据。

 render() {
    const { selectedOption } = this.state;

    return (
      <Select
        name="form-field-name"
        value={selectedOption}
        onChange={this.handleChange}
        options={[
          { value: 'one', label: 'One' },
          { value: 'two', label: 'Two' },
        ]}
      />
    );
  }
}

但是当我尝试使用下面的代码加载动态数据时，它表示没有找到结果，请参阅屏幕截图：http://prntscr.com/jqvp76。

在开发工具中通过console.log（＆＃39; optionItems＆＃39;，optionItems）打印数据，正确打印http://prntscr.com/jqvq7v 如何选择组件成功的选项

render() {
    const { selectedOption } = this.state.selectedOption;
    let optionItems = this.state.trasnportation.map((trans) =>
   [ {value: `${trans.TransportationType}` , label :  `${trans.TransportationType}`}]
);
console.log('optionItems',optionItems)
    return (
      <div className="row">
        <h1>Choose Tranportation Type</h1> 
      <Select className="col-md-8" 
      name="form-field-name"
      value={selectedOption}
      onChange={this.handleChange1}
      option={optionItems}
      placeholder = "Select one of below"/>
    </div>
    );

  }
}

谢谢 - 法迪

Answer 1

The items have wrong type:

    let optionItems = this.state.trasnportation.map((trans) =>
       [ {value: `${trans.TransportationType}` , label :  `${trans.TransportationType}`}] 
    );

to

let optionItems = this.state.trasnportation.map((trans) =>
    ({value: `${trans.TransportationType}` , label :  `${trans.TransportationType}`}) 
); // [] -> ()

Answer 2

可能与错别字有关，在提供的代码中有：

trasnportation
transporation
transportation

选择不显示“反应组件数据”选项

2 个答案: