Question

我正在开发react / redux网站 - 我对redux有基本的经验。我有一个电话会评估“警报”计数 - 我有一个表格将数据推送到服务器。

如果用户尚未填写表单 - 警报计数为1，一旦填写表单，警报计数将设置为0.我需要在用户填写时进行通信和查找形式---但我已经完成了虽然更新了redux - 开始经历一个无限循环。

我知道有一个“componentWillReceiveProps” - 但是一旦用户提交了表单，我的代码库中似乎无法访问..我在渲染中进行了if检查，这就是无限循环发生的地方。

import React, { Component } from 'react'
import { withRouter } from 'react-router-dom';
import { connect } from 'react-redux';
import { bindActionCreators } from 'redux';
import { fetchAddSDQ } from '../../actions/addSDQAction';
import { fetchAlerts } from '../../actions/alertAction';

import { Row, Col } from 'antd';

// components
import AddSDQSyncValidationForm from './AddSDQSyncValidationForm'


// this is a class because it needs state
class AddSDQ extends Component {

  constructor(props, context) {
    super(props, context);
    this.submit = this.submit.bind(this);
  }

  componentDidMount() {    
    // console.log('this', this)
  }

  submit(data) {
    console.log("submitting AddSDQ");
    this.props.fetchAddSDQ(data);
  }

  componentWillReceiveProps(){

  }


  render() {

    if(this.props.addSDQData.data){
        //update the alerts.
        //this.props.fetchAlerts(null);

        //return false;
    }


    return (
      <div className="Page">

            <div className="form-components light">
                <Row>
                  <Col xs={24} sm={24} md={10}>
                    <p>Add SQL</p>
                  </Col>
                  <Col xs={24} sm={24} md={24}>
                    <Row>
                      <Col xs={24} sm={24} md={24}>
                        <AddSDQSyncValidationForm onSubmit={this.submit} />
                      </Col>
                    </Row>
                  </Col>
                </Row>
            </div>

      </div>
    )
  }

}


function mapStateToProps(state) {
  return {
    addSDQData: state.addSDQ,
    alertData: state.alert
  };
}

function mapDispatchToProps(dispatch) {
 return bindActionCreators({ fetchAddSDQ, fetchAlerts }, dispatch);
}

export default withRouter(connect(mapStateToProps, mapDispatchToProps)(AddSDQ))
//export default AddSDQ

Answer 1

使用像这样的componentWillReceiveProps应该可以工作：

componentWillReceiveProps(newProps) {
  if(newProps.addSDQData.data && !this.props.addSDQData.data){
      //update the alerts.
      this.props.fetchAlerts(null);
  }
}

此代码使得fetchAlerts只被调用一次，当addSDQdata.data变为真值时

另外，你不应该做一些改变render方法中redux状态的事情，你应该使用React生命周期方法

但是如果你想在渲染中执行此操作，可以在fetchAlerts之前发送一个将addSDQData.data更改为falsy值的操作

Redux更新/获取通信 - 进程中的bug无限循环

1 个答案: