javascript - qual - what is react




Reactjs-definindo o estado de adereços usando setState no componente filho (2)

Eu estou tendo a seguinte classe que processa os usuários com base em uma lista suspensa de classificação. Os usuários serão listados em ordem alfabética se eu escolher "alfabético" e em ordem de grupo quando eu escolher "grupo".

render(){
    return(
        const {members, sort} = this.state
        { sort === "alphabetical" && <SortByAlphabet members={members} /> }
        { sort === "group" && <SortByGroup members={members}/> }
    )
)

No componente <SortByAlphabet /> estou definindo um objeto de estado do componente de props.members na função componentWillReceiveProps() .

componentWillReceiveProps = props => {
    this.setState({ members : props.members });
}

Quando escolho a classificação "group", o componente <SortByAlphabet /> é desmontado e o <SortByGroup /> é montado no DOM. Novamente, quando eu voltar para o tipo "alfabético", a variável de estado (membros) que foi definida anteriormente no componente <SortByAlphabet /> torna-se NULL porque o componente foi removido do DOM.

componentWillReceiveProps função componentWillReceiveProps não está sendo acionada pela segunda vez ao renderizar <SortByAlphabet /> b'coz os props não foram alterados. Mas eu quero atualizar a variável de estado como eu fiz pela primeira vez na função componentWillReceiveProps .

Como fazer isso?


Como @Vikram também disse, componentWillReceiveProps não é chamado pela primeira vez, então quando seu componente é montado inicialmente seu estado não está sendo configurado, então você precisa definir o estado com props na função componentWillMount/componentDidMount (que são chamados apenas em a primeira renderização) também junto com a função componentWillReceiveProps

componentWillReceiveProps = props => {
    if(props.members !== this.props.members) {
        this.setState({ members : props.members });
    }
}

componentWillMount() {
     this.setState({ members : this.props.members });
}

A partir da versão 16.3.0 , você faria uso do método getDerivedStateFromProps para atualizar o estado em resposta à mudança de props,

getDerivedStateFromProps é invocado depois que um componente é instanciado, bem como quando recebe novos objetos. Ele deve retornar um objeto para atualizar estado ou nulo para indicar que os novos suportes não requerem atualizações de estado.

static getDerivedStateFromProps(nextProps, prevState) {
    if(nextProps.members !== prevState.memebers) {
         return { members: nextProps.members };
    }
    return null;
}

EDIT: Houve uma alteração na API getDerivedStateFromProps da v16.4, onde ele recebe props, estado como argumentos e é chamado em cada atualização junto com a renderização inicial. Nesse caso, você pode acionar uma nova montagem do componente alterando a chave

<SortByAlphabet  key={members} />

e em SortByAlphabet tem

componentWillMount() {
     this.setState({ members : this.props.members });
}

ou use getDerivedStateFromProps como

static getDerivedStateFromProps(props, state) {
    if(state.prevMembers !== props.members) {
         return { members: nextProps.members, prevMembers: props.members };
    }
    return { prevMembers: props.members };
}

componentWillMount é chamado apenas uma vez no ciclo de vida do componente, imediatamente antes de o componente ser renderizado. Geralmente é usado para executar quaisquer alterações de estado necessárias antes da renderização inicial, porque chamar this.setState nesse método não acionará uma renderização adicional. Assim, você pode atualizar seu status usando

componentWillMount ()
{

        this.setState({ members : props.members });


}




react-native