Реакция, ошибка при динамическом создании вкладок

Question

Я использую вкладки React с этого URL: https://codesandbox.io/s/7mjxpo9k7x

Текущий код:

  <Tabs>
        <div label="Gator">
          See ya later, <em>Alligator</em>!
        </div>
        <div label="Croc">
          After &apos;while, <em>Crocodile</em>!
        </div>
        <div label="Sarcosuchus">
          Nothing to see here, this tab is <em>extinct</em>!
        </div>
  </Tabs>

Однако метка должна быть динамической, поэтому я использую функцию картыдля созданного мной массива, который называется «домены» в локальном состоянии, следующим образом:

export class AddComponent2 extends Component {
constructor(props) {
    super(props)
    this.state = {
        domains: [],         

    };
}

componentDidMount() {       
    apiClient.getDomains().then(result => {
        this.setState({ domains: result });
            }); 
}

render() {
    return (
        <div>
            <Tabs>
                {this.state.domains.map(x =>
                    <div label="{x.domainCode}">
                        See ya later, <em>Alligator</em>!
                     </div>
                )}
            </Tabs>

        </div>
    )
}
  }
  export default AddComponent2;

Однако это приводит к следующей ошибке:

TypeError: Cannot read property 'props'из неопределенных

this.state = {activeTab: this.props.children [0] .props.label,};

В массиве есть данные.Когда я жестко кодирую значения (как описано в примере на URL), у меня нет проблем.Почему?

Спасибо!

Answer 1

Возможно, ваша ошибка не из-за кода, который вы прошли, потому что у вас нет { activeTab: this.props.children[0].props.label}; в этом коде.

Но я думаю, вы пытаетесь получить имущество, которого у вас еще нет, потому что вы получаете реквизит асинхронно.Итак ... Вы должны проверить, когда получите ответ и установить activeTab здесь:

apiClient.getDomains().then(result => {
        this.setState({ domains: result, activeTab:... });
});