ComboSelection MaterialUI ReactJs Api Data - PullRequest
Новая
       10

ComboSelection MaterialUI ReactJs Api Data

0 голосов
/ 03 июля 2019

Я новичок в реакции и использую комбинированный список пользовательского интерфейса (компонентов) для отображения выбранных данных из 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>

Каждый раз, когда вы выбираете значение, идентификатору присваивается состояние.

При реализации этого я получаю эту ошибку:

Недопустимый реквизит children, предоставленный Select, ожидается ReactNode.
в Select (создан Context.Consumer)

Кто-нибудь знает, как решить эту проблему? Спасибо

1 Ответ

0 голосов
/ 03 июля 2019

Когда вы инициализируете состояние - вы можете делать это только со значениями, так сказать. Вы не можете использовать значение, основанное на обещании, как вы пытаетесь это сделать: 

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 это вызовет повторное отображение вашего компонента и может использовать данные, которые вы только что сохранили в состоянии.

...