Как установить состояние с обещанием перед рендерингом?

Question

У меня есть обещание в реквизитах: this.props.getProfile(), и я хочу установить значение ответа в обещании в состояние до render ()

Я пробовал с UNSAFE_componentWillMount и getDerivedStateFromProps, но он всегда отвечает на обещание ожидает рассмотрения.

Вот моя попытка с UNSAFE_componentWillMount:

    UNSAFE_componentWillMount(){
        this.setState({profile: this.getProfile()})
    }
    getProfile=()=>{
        return this.props.getProfile()
        .then(res =>{
            if (res.type === 'ERROR_MESSAGE') {
                return null;
            }
            return res.payload
        });
    }

Вот моя попытка с getDerivedStateFromProps:

    static getDerivedStateFromProps (props, state){
        let a = props.getProfile()
        .then(res =>{
            if (res.type === 'ERROR_MESSAGE') {
                return null;
            }
            return res.payload
        });
        console.log(a);
        if(a.profile !== state.profile)
            return {profile: a};
    }

Answer 1

вы можете подумать, что при данном обещании, как только вы вернете что-то внутри метода then, вы сразу же получите это значение обратно, когда на самом деле вы возвращаете другое обещание. чтобы решить, что у вас есть 2 стандартных подхода, используйте async/await или присоедините к обещанию другой then.

getDerivedStateFromProps не предназначен для выборки данных, так как вы можете увидеть хорошее обсуждение здесь

async \ await

async componentDidMount() {
  const profile = await this.props.getProfile()
  this.setState({ profile })
}

цепочка обещаний

componentDidMount() {
  this.props
    .getProfile()
    .then(profile => this.setState({ profile }))
}