Question

我的侧边栏组件是

render() {
 return (
  <Link to={"/test/1"} >Task 1 </Link>
  <Link to={"/test/2"} >Task 2 </Link>
  <Link to={"/test/3"} >Task 3 </Link>
  <Link to={"/test/4"} >Task 4 </Link>
 )
}

我的详情部分是

componentWillReceiveProps(){
    console.log('id: '+this.props.params.id)
    axios.get(this.state.url+'post/'+this.props.params.id)
        .then(response => {
           console.log('id again: '+this.props.params.id)
         }      

        })
        .catch((error) => {
          console.log('error ' + error);
        });
}

这两个组件在同一页面中都可见，我的初始网址为localhost:3000/test/1 我的控制台会提供id: 1和id again: 1。当我点击侧边栏中的任务2 时，我的控制台会显示id: 1和id again: 2，我的网络会给出post/1的api电话。

很明显，问题在于我的侧边栏的每次点击，在调用api之前，值是其先前的值，在api调用之后，它会给出正确的点击链接值。我该如何解决这个问题？

Answer 1

这是因为当有任何道具变化时会调用componentWillReceiveProps。但在调用componentWillReceiveProps之前，组件的道具不会更改。这意味着this.props内的componentWillReceiveProps指向当前的道具，而不是即将到来的道具。（即id: 1登录你的情况）

当反应呼叫componentWillReceiveProps时，它会将即将推出的道具作为参数传递。因此，您可以像{/ p>这样访问componentWillReceiveProps即将推出的道具

componentWillReceiveProps(nextProps){
    console.log('id: '+nextProps.params.id)
    axios.get(this.state.url+'post/'+nextProps.params.id)
        .then(response => {
           console.log('id again: '+nextProps.params.id)
         }      

        })
        .catch((error) => {
          console.log('error ' + error);
        });
}

ReactJS componentwillreceiveprops不会产生正确的值

1 个答案: