React app componentDidMount没有从父

时间:2018-04-30 05:15:35

标签: reactjs react-props react-lifecycle

我试图将道具从父组件传递到子组件,即使它被调用两次(不知道为什么,componentDidMount只应调用一次),道具似乎是空的。< / p>

父组件:

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: 

有任何想法指出我正确的方向吗? 非常感谢!

2 个答案:

答案 0 :(得分:0)

回答@ azium的评论:

  

不,它不应该在控制台中精确显示,因为componentDidMount仅在组件安装时运行一次。当Members组件调用setState并将新道具传递给Menu时,它已经安装,以便使用填充的数组再次调用函数和控制台日志。您可以通过将控制台日志移动到render功能来轻松测试   组件 在创建之前接收道具,但道具是一个空数组。您在Members构造函数中明确说明了这一点。然后在Members登录后,调用setState,使用填充的数组触发另一个渲染。 Read the docs获取完整说明/

答案 1 :(得分:0)

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

java -cp "connector-plugin-client.jar:ojdbc8.jar" the.main.MainClass