我试图将道具从父组件传递到子组件,即使它被调用两次(不知道为什么,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:
有任何想法指出我正确的方向吗? 非常感谢!
答案 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