React app componentDidMount 没有从父级获取道具

Question

我正在尝试将 props 从父组件传递到子组件，尽管它被调用了两次（不知道为什么，componentDidMount 应该只被调用一次）props 似乎是空的。

父组件：

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:

有什么想法可以指引我正确的方向吗？非常感谢！

Answer 1

答案请看@azium 的评论：

no it shouldn't show in the console precisely because componentDidMount only runs once, when the component mounts. when Members component calls setState and pass new props to Menu, it has already mounted so that function and your console log won't be called again with the populated array. you can test this easily by moving your console log into the render function
The component is receiving the props before being created, but the prop is an empty array. You explicitly say that in your Members constructor. Then after Members mounts you call setState which triggers another render with the populated array. Read the docs for a full explanation/

Answer 2

如果您打算在您的组件中操作该道具，请在您的组件中创建一个状态并将其分配给该道具。您仍然无法在 componentDidMount 中执行此操作，但您可以在其中使用 componentDidUpdate 和 setState。请注意，请确保您始终运行与 prevProps 进行比较，否则您将遇到无限循环类型错误。

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

      componentDidUpdate(prevProps) {
        // compare props
        if (this.props.interestList !== prevProps.interestList) {
          this.setState({
            interestList: this.props.interestList
          })
        }
      }
    componentDidMount(){
        // won't work
        console.log("interestList: "  + this.props.interestList);
    }

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

export default Menu;

React app componentDidMount 没有从父级获取道具

React app componentDidMount not getting props from parent

reactjs

react-lifecycle

react-props