编辑文本框后重新加载反应 table 值

Question

一个问题下面的代码用reactstrap执行一个tabel的显示，当我执行搜索时它对后端进行rest调用并且returns一个里面有一系列值的数组，什么我想做的是在从后端加载值时重新加载table，我该如何实现呢？当文本更改时，将调用 handleChange 函数加载值并将它们插入到 table 中显示的数组中，但在此操作之后我必须确保重新创建 table ，我该如何实现？

反应代码：

import React from "react";
import {
  Row,
  Col,
  Table,
  Progress,
  Button,
  UncontrolledButtonDropdown,
  DropdownMenu,
  DropdownToggle,
  DropdownItem,
  Input,
  Badge,
  InputGroupAddon,
  InputGroupText,
  InputGroup,
  FormGroup,
} from "reactstrap";

import { Sparklines, SparklinesBars } from "react-sparklines";

import Widget from "../../../components/Widget";
import s from "./Static.module.scss";
import {ricercaclienti} from "../../../services/cliente";


class Static extends React.Component {
  constructor(props) {
    super(props);
    this.textInput = React.createRef();

    this.state = {
      tableStyles: [
        {
          id: 1,
          picture: require("../../../images/tables/1.png"), // eslint-disable-line global-require
          description: "michele rusco",
          info: {
            type: "JPEG",
            dimensions: "200x150",
          },
          date: new Date("September 14, 2012"),
          size: "45.6 KB",
          progress: {
            percent: 29,
            colorClass: "success",
          },
        },
        {
          id: 2,
          picture: require("../../../images/tables/2.png"), // eslint-disable-line global-require
          description: "The Sky",
          info: {
            type: "PSD",
            dimensions: "2400x1455",
          },
          date: new Date("November 14, 2012"),
          size: "15.3 MB",
          progress: {
            percent: 33,
            colorClass: "warning",
          },
        },
       
      ],

    };

    this.checkAll = this.checkAll.bind(this);
  }

  parseDate(date) {
    this.dateSet = date.toDateString().split(" ");

    return `${date.toLocaleString("en-us", { month: "long" })} ${
      this.dateSet[2]
    }, ${this.dateSet[3]}`;
  }

  checkAll(ev, checkbox) {
    const checkboxArr = new Array(this.state[checkbox].length).fill(
      ev.target.checked
    );
    this.setState({
      [checkbox]: checkboxArr,
    });
  }

  //Function call con text change
  async handleChange(event) {
    let searchtext = event.target.value;
    var result=await ricercaclienti(searchtext);
    for(var i=0; i<result.length; i++){
      var value={
        id: i,
        picture: require("../../../images/tables/2.png"), // eslint-disable-line global-require
        description: result[i].RagioneSociale,
        info: {
          type: "PSD",
          dimensions: "2400x1455",
        },
        date: new Date("November 14, 2012"),
        size: "15.3 MB",
        progress: {
          percent: 33,
          colorClass: "warning",
        }
      };

      this.state.tableStyles.push(value);
    }
   
    console.log("Testo ricercato: "+result.length);
  }

  changeCheck(ev, checkbox, id) {
    this.state[checkbox][id] = ev.target.checked;
    if (!ev.target.checked) {
      this.state[checkbox][0] = false;
    }
    this.setState({
      [checkbox]: this.state[checkbox],
    });
  }

  render() {
    return (
      <div className={s.root}>
        <h2 className="page-title">
          Clienti - <span className="fw-semi-bold"> Anagrafia</span>
        </h2>
        <Row>
          <Col>

            <Widget

              settings
              close
              bodyClass={s.mainTableWidget}
            >
                <p></p>
                <p></p>
                <p></p>
                <p></p>

            <FormGroup >
            <InputGroup className="input-group-no-border">
              <InputGroupAddon addonType="prepend">
                <InputGroupText>
                  <i className="fa fa-search text-white" />
                </InputGroupText>
              </InputGroupAddon>
              <Input
                id="search-input"
                className="input-transparent"
                placeholder="Ricerca"
                type='text'
  name='ricerca'
  onChange={this.handleChange.bind(this)}

              />
            </InputGroup>
          </FormGroup>
              <Table striped>
                <thead>
                  <tr className="fs-sm">
                    <th className="hidden-sm-down">#</th>
                    <th>Cliente</th>
                    <th>Ragione Sociale</th>
                    <th className="hidden-sm-down">Indirizzo</th>
                    <th className="hidden-sm-down">Data Inserimento</th>
                    <th className="hidden-sm-down">CAP</th>
                    <th className="hidden-sm-down">Stato</th>
                  </tr>
                </thead>
                <tbody>
                  {this.state.tableStyles.map((row) => (
                    <tr key={row.id}>
                      <td>{row.id}</td>
                      <td>
                        <img
                          className="img-rounded"
                          src={row.picture}
                          alt=""
                          height="50"
                        />
                      </td>
                      <td>
                        {row.description}
                        {row.label && (
                          <div>
                            <Badge color={row.label.colorClass}>
                              {row.label.text}
                            </Badge>
                          </div>
                        )}
                      </td>
                      <td>
                        <p className="mb-0">
                          <small>
                            Città:
                            <span className="text-muted fw-semi-bold">
                              &nbsp; {row.info.type}
                            </span>
                          </small>
                        </p>
                        <p>
                          <small>
                            Provincia:
                            <span className="text-muted fw-semi-bold">
                              &nbsp; {row.info.dimensions}
                            </span>
                          </small>
                        </p>
                      </td>
                      <td className="text-muted">{this.parseDate(row.date)}</td>
                      <td className="text-muted">{row.size}</td>
                      <td className="width-150">
                        <Progress
                          color={row.progress.colorClass}
                          value={row.progress.percent}
                          className="progress-sm mb-xs"
                        />
                      </td>
                    </tr>
                  ))}
                </tbody>
              </Table>
              <div className="clearfix">
                <div className="float-right">
                  <Button color="default" className="mr-2" size="sm">
                    Refresh...
                  </Button>
                  <UncontrolledButtonDropdown>
                    <DropdownToggle
                      color="inverse"
                      className="mr-xs"
                      size="sm"
                      caret
                    >
                      Opzioni
                    </DropdownToggle>
                    <DropdownMenu>
                      <DropdownItem>Clear</DropdownItem>
                      <DropdownItem>Move ...</DropdownItem>
                      <DropdownItem>Something else here</DropdownItem>
                      <DropdownItem divider />
                      <DropdownItem>Separated link</DropdownItem>
                    </DropdownMenu>
                  </UncontrolledButtonDropdown>
                </div>
                <p></p>
              </div>
            </Widget>
          </Col>
        </Row>
      
                          </div>
    );
  }
}

export default Static;

Answer 1

您的代码：

this.state.tableStyles.push(value);

这不是设置状态的正确方法。请阅读 Documentation

应该是：

this.setState({tableStyles : [...this.state.tableStyles, value]});

方法setState有助于更新状态并重新呈现 JSX