Reactjs - 使用子組件中的setState從props設置State

Question

我有以下類根據排序下拉列表呈現用戶。 如果我選擇“按字母順序”，則按字母順序列出用戶，當我選擇“組”時，將按組順序列出。

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

在<SortByAlphabet />組件中，我從componentWillReceiveProps()函數中的props.members設置組件狀態對象。

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

當我選擇“group”排序時， <SortByAlphabet />組件將被卸載並且<SortByGroup />將安裝在DOM中。 再次當我切換回“按字母順序”排序時，在<SortByAlphabet />組件中<SortByAlphabet />設置的狀態變量（成員）變為NULL，因為該組件已從DOM中刪除。

componentWillReceiveProps函數沒有在第二次觸發時重新渲染<SortByAlphabet /> b'coz道具沒有改變。 但我想更新狀態變量，就像我第一次在componentWillReceiveProps函數中做的那樣。

怎么做？

Answer 1

正如@Vikram所說， componentWillReceiveProps沒有第一次被調用，所以當你的組件最初被掛載時你的狀態沒有被設置，所以你需要在componentWillMount/componentDidMount函數中設置帶有props的狀態（僅在第一個渲染）也與componentWillReceiveProps函數一起使用

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

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

從版本16.3.0開始，您將使用getDerivedStateFromProps方法更新狀態以響應props更改，

在實例化組件之后以及在接收新的props時調用getDerivedStateFromProps 。 它應該返回一個更新狀態的對象，或者返回null以指示新的props不需要任何狀態更新。

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

編輯：從v16.4開始，getDerivedStateFromProps API發生了變化，它接收道具，作為參數進行狀態調整，並在每次更新時調用以及初始渲染。 在這種情況下，您可以通過更改密鑰來觸發組件的新安裝

<SortByAlphabet  key={members} />

並且在SortByAlphabet中有

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

或使用getDerivedStateFromProps之類的

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

Answer 2

componentWillMount僅在組件生命周期中調用一次，緊接在呈現組件之前。 它通常用於執行初始渲染之前所需的任何狀態更改，因為在此方法中調用this.setState不會觸發其他渲染所以您可以使用更新您的staate

componentWillMount ()
{

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


}