react bootstrap table 不刷新不渲染数据

Question

我正在使用 react-redux 和 react bootstrap table 。我的 UI 如图所示。当我添加付款时，数据保存在数据库中。我已经使用 componentdidupdate 和 componentdidUpdate 来呈现道具数据。但没有任何效果。 table 不刷新就不会呈现数据。请帮忙................................................ ..................................................... ....

import React from 'react';
import { connect } from 'react-redux';
// import {bindActionCreators} from 'redux'
import { Link } from 'react-router';
import Messages from '../Messages';
import classnames from 'classnames';
import { BootstrapTable, TableHeaderColumn } from 'react-bootstrap-table';
import { getCrmOneCustomer, saveStatus, getCrmStatus } from '../../actions/crmAction';
//--------------------------------------------------------------------------
class CrmStatus extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            name: '', shop_name: '', crm_id: '', status: ''
        };

        this.props.dispatch(getCrmOneCustomer(this.props.params.id));
        this.handleChange = this.handleChange.bind(this);
        this.handleSubmit = this.handleSubmit.bind(this);
    }


    componentDidMount() {
         this.props.dispatch(getCrmStatus(this.props.params.id));

    }

    //--------------------------------------------------------------------------
    componentWillReceiveProps(newProps) {
        console.log('componentWillReceiveProps............ from edit');
        console.log(newProps)
        this.setState({
            name: newProps.CrmOne.name,
            shop_name: newProps.CrmOne.shop_name,
            status: newProps.CrmOne.status, 

        })
      }
    //--------------------------------------------------------------------------
    handleChange(event) {
        this.setState({
            [event.target.name]: event.target.value
        });
    }
    //--------------------------------------------------------------------------
    handleSubmit(event) {
        event.preventDefault();
        var Id = this.props.params.id;
        var obj = {};
        obj["crm_id"] = Id
        obj["name"] = this.state.name
        obj["shop_name"] = this.state.shop_name
        obj["status"] = this.state.status
        console.log(obj)

        this.props.dispatch(saveStatus(obj))
    }
    //--------------------------------------------------------------------------

    componentDidUpdate(){

        this.products = this.props.CrmOneStatus
    }

    render() {


        return (
            <div className="container ca-container">

                <div className="row">
                    <div className="col-md-12">
                    <h2>CRM Status</h2>


                    </div>
                </div>
                <div className="row">
            <div className="col-md-12">

            <div className ="col-md-8">
            <BootstrapTable data={this.products} striped hover pagination={true} search>
            <TableHeaderColumn isKey dataField='name'>Name</TableHeaderColumn>
            <TableHeaderColumn dataField='status'>status</TableHeaderColumn>
            <TableHeaderColumn dataField='createdAt'>Date</TableHeaderColumn>
            </BootstrapTable>
            </div>
            <div className ="col-md-4">
            <h4> Add Payment  </h4>

            <form onSubmit={this.handleSubmit} encType="multipart/form-data">

            <div className="form-group">
                  <label>
                    Name:
               </label>
                  <input disabled type="text" className="form-control" name="name" value={this.state.name} onChange={this.handleChange} placeholder="Zahid Hasan" />
                </div>
                <div className="form-group">
                  <label>
                  shop name:
                </label>
                  <input  type="text" className="form-control" name="shop_name" value={this.state.shop_name} onChange={this.handleChange} placeholder="amount" />
                </div>

              <div className="form-group">
              <label>
              Status:
              </label>
              <textarea  rows="8" cols="50"  type="text" className="form-control" name="status" value={this.state.status} onChange={this.handleChange} placeholder="comment" />
              </div>
              <div className="btn-group" role="group">
              <button type="submit" className="btn btn-success btn-lg">Submit</button>



             </div>
             </form>


             </div>
             </div>
             </div>


            </div>
        );
    }
}
// ======================== REDUX CONNECTORS ========================
const mapStateToProps = (state) => {
    return {
        CrmOne: state.crmCustomer.CrmOne,
        CrmOneStatus: state.crmCustomer.CrmOneStatus
    };
};

export default connect(mapStateToProps)(CrmStatus);

Answer 1

您正在请求获取 componentDidMount 函数中的数据，该函数仅在组件已安装时执行一次，即它在您刷新页面时起作用的原因，但是您应该获取数据每当道具改变时，即使用 componentWillReceiveProps 函数。另外你不需要将道具分配给class变量，你可以直接使用道具作为数据。

class CrmStatus extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            name: '', shop_name: '', crm_id: '', status: ''
        };

        this.props.dispatch(getCrmOneCustomer(this.props.params.id));
        this.handleChange = this.handleChange.bind(this);
        this.handleSubmit = this.handleSubmit.bind(this);
    }


    componentDidMount() {
         this.props.dispatch(getCrmStatus(this.props.params.id));

    }

    componentWillReceiveProps(newProps) {
        console.log('componentWillReceiveProps............ from edit');
        console.log(newProps)
        if(nextProps.params.id !== this.props.params.id) {
             this.props.dispatch(getCrmStatus(nextProps.params.id));
        }
        this.setState({
            name: newProps.CrmOne.name,
            shop_name: newProps.CrmOne.shop_name,
            status: newProps.CrmOne.status, 

        })
      }
    //--------------------------------------------------------------------------
    handleChange(event) {
        this.setState({
            [event.target.name]: event.target.value
        });
    }
    //--------------------------------------------------------------------------
    handleSubmit(event) {
        event.preventDefault();
        var Id = this.props.params.id;
        var obj = {};
        obj["crm_id"] = Id
        obj["name"] = this.state.name
        obj["shop_name"] = this.state.shop_name
        obj["status"] = this.state.status
        console.log(obj)

        this.props.dispatch(saveStatus(obj))
    }
    //--------------------------------------------------------------------------


    render() {


        return (
            <div className="container ca-container">

                <div className="row">
                    <div className="col-md-12">
                    <h2>CRM Status</h2>


                    </div>
                </div>
                <div className="row">
            <div className="col-md-12">

            <div className ="col-md-8">
            <BootstrapTable data={this.props.CrmOneStatus} striped hover pagination={true} search>
            <TableHeaderColumn isKey dataField='name'>Name</TableHeaderColumn>
            <TableHeaderColumn dataField='status'>status</TableHeaderColumn>
            <TableHeaderColumn dataField='createdAt'>Date</TableHeaderColumn>
            </BootstrapTable>
            </div>
            <div className ="col-md-4">
            <h4> Add Payment  </h4>

            <form onSubmit={this.handleSubmit} encType="multipart/form-data">

            <div className="form-group">
                  <label>
                    Name:
               </label>
                  <input disabled type="text" className="form-control" name="name" value={this.state.name} onChange={this.handleChange} placeholder="Zahid Hasan" />
                </div>
                <div className="form-group">
                  <label>
                  shop name:
                </label>
                  <input  type="text" className="form-control" name="shop_name" value={this.state.shop_name} onChange={this.handleChange} placeholder="amount" />
                </div>

              <div className="form-group">
              <label>
              Status:
              </label>
              <textarea  rows="8" cols="50"  type="text" className="form-control" name="status" value={this.state.status} onChange={this.handleChange} placeholder="comment" />
              </div>
              <div className="btn-group" role="group">
              <button type="submit" className="btn btn-success btn-lg">Submit</button>



             </div>
             </form>


             </div>
             </div>
             </div>


            </div>
        );
    }
}

Answer 2

在构造函数中我添加了这个

this.props.dispatch(getCrmStatus(this.props.params.id));

并处理提交

this.props.dispatch(getCrmStatus(this.props.params.id));

它就像魅力一样!!!!!!!!!!!!!!!!

react bootstrap table 不刷新不渲染数据

react bootstrap table not rendering data without refresh

reactjs

react-bootstrap-table