Как получить реквизит до события Render

Question

Я новичок в React, и у меня проблема с получением реквизита от родителя до того, как ребенок будет воспроизведен.

Как видите, у меня есть компонент Editor, который отправляет строку в качестве кнопки для кнопки. Где собирается, пока кто-нибудь не нажмет кнопку (событие onClick), затем обновит состояние с помощью реквизитов (из редактора) и отправит их в качестве реквизитов в DataTable, где есть метод componentWillReceiveProps , который отправляет реквизиты в качестве запроса на выборку.

! Но когда я нажал на кнопку, ! вызывается, пока компонент DataTable не получит реквизиты от кнопки. Я знаю, ребенок называется до родителя, что теперь делать? Я потерян в этом. 101

Вот код
Кнопка

    componentWillReceiveProps(nextProps, nextContext) {
        if(nextProps.queryFromEditor !== this.props.queryFromEditor){
            this.setState({queryFromEditorString: nextProps.queryFromEditor.join(' ')});
        }
    }

    submitData= () =>{
        this.setState({
            buttonState: !this.state.buttonState,
            queryFromEditorString: this.state.queryFromEditorString,
        });
        //console.log('Button: '+ this.state.queryFromEditorString)
    }
render(){
      return(
               <div>
                  <div className="submit">
                      <input onClick={this.submitData} id="querySend"
                             type="submit"
                             value="Submit query"
                              />
                  </div>
<DataTable
                queryFromEditorString = {this.state.queryFromEditorString}
                buttonState = {this.state.buttonState}/>
             </div>
              )
}

DataTable

componentWillReceiveProps(nextProps, nextContext) {
        if(nextProps.buttonState !== this.props.buttonState){
            this.setState({queryFromEditor: nextProps.queryFromEditorString});
            console.log('Component: '+this.state.queryFromEditor)
            this.fetchQuery()
        }
    }


    fetchQuery(){
        fetch('/api/query',
            {
                method: "POST",
                headers: {
                    'Content-Type': 'application/json'
                },
                body: JSON.stringify({ content: this.state.queryFromEditor})
            })
            .then(res => res.json())
            .then(qo =>{ this.setState({queryOutput: qo})
                console.log('Table fetch: '+JSON.stringify(qo))
            })
    }

    componentDidMount(){

        //Fetching number of affected and changed rows
        fetch('/api/update')
            .then(res => res.json())
            .then(rows => {this.setState({rows: rows})
            console.log(rows)
            });

        //Fetching output from user query
        this.fetchQuery()

    }

render(){...}

Answer 1

this.setState является асинхронным, что означает, что он не будет обновлять компонент немедленно.

Если вы действительно хотите обновить состояние из реквизита, я бы предложил использовать getDerivedStateFromProps вместо. Другим решением было бы вызвать this.fetchQuery () в обратном вызове setState, чтобы убедиться, что обновление завершено следующим образом:

this.setState({queryFromEditor: nextProps.queryFromEditorString}, () => {
  console.log('Component: '+this.state.queryFromEditor)
  this.fetchQuery()
});

Однако , почему бы вам просто не использовать поддерживает fetchQuery напрямую, вместо установки его в состояние?

body: JSON.stringify({ content: this.props.queryFromEditor})