javascript - 如何在 React 中重新加载表中的数据

问题描述

我开发了一个从另一个组件（父亲）接收数据的组件。接收数据的组件第一次正确显示数据，但第二次不这样做。

第二次调用方法 componentWillReceiveProps 并且我已经实现了这个。但是，尽管如此，数据并未刷新。

要查看第二次调用的数据，我需要第三次向子组件发送数据，此时我将看到第二次调用的数据。

子组件的代码是：

import React, {Component} from "react";
import { Button, Spinner } from "react-bootstrap";
import BootstrapTable from 'react-bootstrap-table-next';
import { columnsTTShootingFEB, sortedTTShootingFEB } from "../../FEBCOM/column.tables";
import ToolkitProvider from 'react-bootstrap-table2-toolkit';
import "../../../css/content.css";

/**
 * This constat let me have a row with buttons who show or hide columns 
 * 
 * @param {*} param0 
 */
const CustomToggleList = ({
    columns,
    onColumnToggle,
    toggles
  }) => (
    <div className="btn-group btn-group-toggle" data-toggle="buttons" style = {{width: 100 + "%"}}>
      {
        columns
          .map(column => ({
            ...column,
            toggle: toggles[column.dataField]
          }))
          .map((column, index) => {
              if (index > 1){
                return (<button
                type="button"
                key={ column.dataField }
                className={ `btn btn-success btn-sm ${column.toggle ? 'active' : ''}` }
                data-toggle="button"
                aria-pressed={ column.toggle ? 'true' : 'false' }
                onClick={ () => onColumnToggle(column.dataField) }
                >
                    { column.text }
                </button>)
              }
            })
      }
    </div>
  );

class TTShooting extends Component{
    constructor(props){
        super(props);
        this.props = props;
        this.state = {
            loaded: false
        };
    }
componentDidMount(){
    console.log("Componente cargado");
    console.log("id_team_club 1: " + this.props.teams_std_stats[0].id_team_club);
    this.setState({
        loaded: true,
        teams_std_stats: this.props.teams_std_stats
    });
}

componentWillReceiveProps(nextProps){
    this.props = nextProps;
    console.log("id_team_club 2: " + this.props.teams_std_stats[0].id_team_club);
    this.setState({
        teams_std_stats: this.props.teams_std_stats
    });
    console.log("Componente recibe nuevos datos");
}

render(){
    return(
        <div>
            {
                (this.state.loaded) ?
                    <div>
                        {
                            (this.props.language === "es") ?
                                <div>
                                <ToolkitProvider
                                    keyField="id_team_club"
                                    data={ this.state.teams_std_stats }
                                    columns={ columnsTTShootingFEB }
                                    columnToggle
                                    >
                                    {
                                        props => (
                                        <div>
                                            <p className = "text-justify" style = {{fontSize: 12 + "pt"}}><b>Nota: </b>Para añadir o eliminar columnas en la tabla basta hacer clic sobre uno de estos botones</p>
                                            <CustomToggleList { ...props.columnToggleProps } />                                                
                                            <hr />
                                            <BootstrapTable
                                            { ...props.baseProps }
                                            footerClasses = "footer-class"
                                            defaultSorted = { sortedTTShootingFEB }
                                            />
                                        </div>
                                        )
                                    }
                                </ToolkitProvider>
                                </div>
                            :
                                <h2>Pendiente de desarrollo</h2>                                
                        }
                    </div>
                :
                    <div style = {{marginTop: 10 + "px"}}>
                        <Button variant="dark" disabled>
                            <Spinner
                                as="span"
                                animation="border"
                                size="sm"
                                role="status"
                                aria-hidden="true"
                            />
                            <span className="sr-only">
                                {(this.props.language === "es") ? "Cargando datos ..." : "Loading data ..."}
                            </span>
                        </Button>{' '}
                        <Button variant="dark" disabled>
                            <Spinner
                                as="span"
                                animation="grow"
                                size="sm"
                                role="status"
                                aria-hidden="true"
                                />
                                {(this.props.language === "es") ? "Cargando datos ..." : "Loading data ..."}
                        </Button>                    
                    </div>                    
            }
        </div>
    )
}
}

module.exports.TTShooting = TTShooting;

此代码在第一次和其他时间被调用时返回一个日志。第一次返回：

> id_team_club 1: 769

这是对的。当我发送新数据时调用方法 componentWillReceiveProps，我更新道具和状态并显示第一个元素的 id_team_club，这也是一样的。该方法被调用两次。

> id_team_club 2: 769 
> Componente recibe nuevos datos
> id_team_club 2
> Componente recibe nuevos datos

但是，如果我再次发送数据，那么我会在第二次调用该函数时显示第二次发送数据的数据：

> id_team_club 2: 769
> Componente recibe nuevos datos
> **id_team_club 2: 720**
> Componente recibe nuevos datos

我究竟做错了什么？如何更新表的数据？

编辑

我已经更新了 componentWillReceiveProps 的代码以及如何将数据传递到表中。

componentWillReceiveProps(nextProps){
    if (this.props.teams_std_stats !== nextProps.teams_std_stats) {
        console.log("Vamos a modificar el state");
        this.setState({
          teams_std_stats: nextProps.teams_std_stats
        });
      }
}

                            <ToolkitProvider
                                keyField="id_team_club"
                                data={ this.state.teams_std_stats }
                                columns={ columnsTTShootingFEB }
                                columnToggle
                                >
                                {
                                    props => (
                                    <div>
                                        <p className = "text-justify" style = {{fontSize: 12 + "pt"}}><b>Nota: </b>Para añadir o eliminar columnas en la tabla basta hacer clic sobre uno de estos botones</p>
                                        <CustomToggleList { ...props.columnToggleProps } />                                                
                                        <hr />
                                        <BootstrapTable
                                        { ...props.baseProps }
                                        footerClasses = "footer-class"
                                        defaultSorted = { sortedTTShootingFEB }
                                        />
                                    </div>
                                    )
                                }
                            </ToolkitProvider>

但是，它不起作用。

标签： javascriptreactjs

javascript - 如何在 React 中重新加载表中的数据

问题描述

编辑

解决方案

推荐阅读