ajax调用后无法接收更新的道具(反应)

时间:2017-02-08 11:29:47

标签: javascript ajax reactjs

获取将数据发送到服务器的函数

addRemark(id,e) {

      var remarktext = this.state.popUpText;
      this.props.addRemark(id,remarktext); // this func sends to serve
      this.props.closePopUp();
      setTimeout(function() { this.props.IncomeListProfile(); }.bind(this), 1000);
    }

现在我等着用这段代码更新我的清单 setTimeout(function() { this.props.IncomeListProfile();

但是我现在想要清楚,当数据将被添加。我在行动中创建了func

export function SendedData(data) {
if (data) {
  return {
      type: SENDED_REMARK, data:true
        }
}
}

我收到了TRUE。请求好的时候

function mapStateToProps(state) {


      var sended = state.getIn(['PopupReducer'])['sendedRemark'];
      console.log(sended + 'true');
      return {

        sended: sended
            };

  }

但是在发送请求后我无法获得真正的价值,在我尝试的组件中

componentWillReceiveProps(nextProps) {
        this.setState({ sendeder: nextProps.sended });
        console.log('isshwon!!!! ' + this.state.sendeder); //get false every time
      }

所以想法是,当我按下按钮"保存"我将reqest发送到服务器,获得TRUE响应,之后我需要更新我的列表

我使用axios的请求

export function addRemark(id,remarktext) {

    return dispatch => {

        return (
            console.log(id + remarktext),

            axios.post(Api.getURI("addremark"),{body: {course_id:id, remark:remarktext}}, {
            headers: { 'X-Authenticated-Userid': '15000500000@1' }
         }).then(function (response) {


                    //console.log(response.data);
                    dispatch(SendedData(response.data));

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

}

1 个答案:

答案 0 :(得分:1)

你的减速机

git diff <file name>

您的组件

[types.SENDED_DATA] : (state, action) => 
   return { ...state,
      data: Immutable.fromJS(action.d),ata
      isLoading: false
   }

或者根本不做任何重新渲染组件,基于shouldComponentUpdate (nextProps) { return nextProps.data !== this.props.data } componentDidUpdate (prevProps) { if(prevProps.data !== this.props.data) { //do smthing that you need, data was changed this.props.IncomeListProfile(); } } 进行渲染,data返回shouldComponentUpdate - 它会重新渲染