web-dev-qa-db-ja.com

React appcomponentDidMountが親から小道具を取得していません

親コンポーネントから子コンポーネントに小道具を渡そうとしていますが、2回呼び出されても（理由はわかりませんが、componentDidMountは1回だけ呼び出されるはずです）、小道具は空のようです。

親コンポーネント：

class Members extends Component{
    constructor(props){
        super(props);
        this.state = {
            interests: []
        }
    }

    componentDidMount(){
        fetch(interestUrl, {
            method: 'GET',
            headers: {
              "Content-Type": "application/json",
              "Authorization": this.props.authToken
            }
        })
        .then((response) => response.json())
        .then((json) => {this.setState({interests: json})})
        .catch(error => {console.log("Error: " + error)})
    };

    render(){
        return(
            <div className="Members-body">
                <div className="Menu-sidebar">
                    <Menu interestList = {this.state.interests}/>
                </div>
                <div className="Main-container">
                    <Main/>
                </div>
            </div>
        )
    }

}
export default Members;

子コンポーネント：

class Menu extends Component {
    constructor(props){
        super(props);
    }

    componentDidMount(){
        console.log("interestList: "  + this.props.interestList);
    }

    render() {
        return(
            <div className="Menu-container">
                este es el menu de la aplicacion
            </div>
        )
    }
}

export default Menu;

Menuコンポーネント内のcomponentDidMountからのコンソールログは次のように出力します。

interestList: 
interestList:

私を正しい方向に向けるためのアイデアはありますか？よろしくお願いします！

reactjsreact-propsreact-lifecycle
6
Dieguinho

答えについては、@ aziumのコメントを見てください。

いいえ、コンポーネントのマウント時にcomponentDidMountが1回だけ実行されるため、コンソールに表示されるべきではありません。 MembersコンポーネントがsetStateを呼び出し、新しい小道具をMenuに渡すとき、関数とコンソールログが入力された配列で再度呼び出されないように、すでにマウントされています。コンソールログをrender関数に移動することで、これを簡単にテストできます。
コンポーネントは作成される前に小道具を受け取りますが、小道具は空の配列です。 Membersコンストラクターでそれを明示的に言います。次に、Membersがマウントされた後、setStateを呼び出します。これにより、入力された配列でanotherレンダリングがトリガーされます。 ドキュメントを読む 完全な説明について/

0
Dieguinho