Блог

После того, как я использую setState in getClients() , состояние clientOptions отображается правильно. Но когда я пытаюсь передать его дочернему компоненту, это пустой массив. Я попытался снова зарегистрировать его после componentDidMount и там кажется, что состояние clientOptions сбрасывается в исходное состояние ( [] ). Извините, если это кажется вопросом новичка, я довольно новичок в react.

 class Main extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      clientFilter: 'ALL',
      positionFilter: 'ALL',
      clientOptions: []
    };
  }

  componentDidMount = () => {
    this.getClients()
    this.getTitles()
    console.log('this one shows only []: '   this.state.clientOptions)
  }
  
  getClients = () => {
    axios.get('http://localhost:5000/clients')
    .then((response) => {
      let clientObj = [{value: 'ALL', label: 'ALL'}];
      const clientOptions = []

      response.data.forEach(function (client, index) {
        clientObj.push({value: client.name, label: client.name})
      });
      clientOptions.push({'options' : clientObj});

      this.setState(prevState =>{
        return{
             ...prevState,
             clientOptions : clientOptions
        }
     })
     console.log('this one works: '   this.state.clientOptions)
    });
  }
  

В соответствии с запросом состояние передается дочернему элементу:

   render() {
    return (
      <div className="main">
        <Header 
          clientOptions={this.state.clientOptions}
        />
      </div>
    );
  }