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

【问题标题】：React app componentDidMount not getting props from parentReact app componentDidMount没有从父级获取道具
【发布时间】：2018-10-10 04:24:56
【问题描述】：

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

父组件：

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:

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

【问题讨论】：

您确定菜单组件没有在您的 UI 中的两个位置加载。您还可以确保Main 组件没有指向Menu
console.log 也是正确的。你可以在控制台中测试这个"foo: " + []
stackoverflow.com/questions/43779411/… 可能重复
不，它不应该准确地显示在控制台中，因为componentDidMount 仅在组件安装时运行一次。当Members 组件调用setState 并将新道具传递给Menu 时，它已经挂载，因此该函数和您的控制台日志将不会被填充的数组再次调用。您可以通过将控制台日志移动到 render 函数来轻松测试这一点
组件正在在创建之前接收props，但是props是一个空数组。您在 Members 构造函数中明确表示。然后在Members 挂载后调用setState，它会触发another 使用填充的数组进行渲染。 Read the docs完整解释/

标签： reactjs react-props react-lifecycle

【解决方案1】：

查看@azium 的 cmets 的答案：

不，它不应该准确地显示在控制台中，因为componentDidMount 仅在组件挂载时运行一次。当Members 组件调用setState 并将新的道具传递给Menu 时，它已经挂载，因此该函数和您的控制台日志将不会被填充的数组再次调用。您可以通过将控制台日志移至 render 函数来轻松测试此功能
组件正在在创建之前接收 props，但 props 是一个空数组。您在 Members 构造函数中明确表示。然后在Members 挂载之后调用setState，它会触发another 使用填充的数组进行渲染。 Read the docs完整解释/

【讨论】：

如何处理这种情况？ (w/o redux)

【解决方案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;

【讨论】：