ReactJS-状态更改时数据表未重新呈现/更新

第一，请忽略我糟糕的英语。 我是新生，我在标题上写了一个问题。 我看到array.push成功地将更多产品添加到ProductList中，但表并没有更新。。。 此外，我尝试了使用setState这样的方法，但没有成功。 我仍然被困住了，希望有人能告诉我解决问题的方法，深深感激

这是index.js文件中的列：

const Columns = [
{
  name: '#',
  selector: 'productCode',
  center: true,
  width: '5rem',
},
{
  name: <FormattedMessage {...messages.productName}/>,
  selector: 'productName',
  center: true,
},
{
  name: <FormattedMessage {...messages.productDescription}/>,
  selector: 'productDescription',
  center: true,
},
{
  name: <FormattedMessage {...messages.productPrice}/>,
  selector: 'productPrice',
  center: true,
},
{
  name: <FormattedMessage {...messages.productQuantity}/>,
  selector: 'productQuantity',
  center: true,
},
{
  name: <FormattedMessage {...messages.totalPrice}/>,
  selector: 'totalPrice',
  center: true,
},
{
  name: <FormattedMessage {...messages.action}/>,
  selector: 'action',
  center: true,
},];

这是表的数据：

  const [ProductList, setProductList] = useState([
{
  productCode:1,
  productName: <Input type="text" defaultValue="Product 1" className="text-center" />,
  productDescription:<Input type="text" defaultValue="description 1" className="text-center" />,
  productPrice: <Input type="number" defaultValue="1000" className="text-center" />,
  productQuantity: <Input type="number" defaultValue="10" className="text-center" />,
  totalPrice:10000,
  action: <Button color="danger" onClick={deleteProduct}>
            <FontAwesomeIcon className="mr-2" icon="times"/>
            <FormattedMessage {...messages.deleteProduct}/>
          </Button>,
},
{
  productCode:2,
  productName: <Input type="text" defaultValue="Product 2" className="text-center" />,
  productDescription:<Input type="text" defaultValue="description 2" className="text-center" />,
  productPrice: <Input type="number" defaultValue="1000" className="text-center" />,
  productQuantity: <Input type="number" defaultValue="10" className="text-center" />,
  totalPrice:10000,
  action: <ButtonAsync color="danger">
            <FontAwesomeIcon className="mr-2" icon="times"/>
            <FormattedMessage {...messages.deleteProduct}/>
          </ButtonAsync>,
},
{
  productCode:3,
  productName: <Input type="text" defaultValue="Product 3" className="text-center" />,
  productDescription:<Input type="text" defaultValue="description 3" className="text-center" />,
  productPrice: <Input type="number" defaultValue="1000" className="text-center" />,
  productQuantity: <Input type="number" defaultValue="10" className="text-center" />,
  totalPrice:10000,
  action: <ButtonAsync color="danger">
            <FontAwesomeIcon className="mr-2" icon="times"/>
            <FormattedMessage {...messages.deleteProduct}/>
          </ButtonAsync>,
},
]);

这是添加功能：

const addProduct = () => {
let product = {
  productCode: ProductList[ProductList.length - 1].productCode + 1,
  productName: <Input type="text" defaultValue="" className="text-center" />,
  productDescription:<Input type="text" defaultValue="" className="text-center" />,
  productPrice: <Input type="number" defaultValue="" className="text-center" />,
  productQuantity: <Input type="number" defaultValue="" className="text-center" />,
  totalPrice:'',
  action: <ButtonAsync color="danger">
            <FontAwesomeIcon className="mr-2" icon="times"/>
            <FormattedMessage {...messages.deleteProduct}/>
          </ButtonAsync>,
};
ProductList.push(product);
console.log(ProductList);

}

这是数据表：

<Col xs={12}>
                <div className="general-info">
                  <div className="d-flex justify-content-between">
                    <div className="text-uppercase title-block mt-3 mb-3">
                      <FormattedMessage {...messages.productSelected} />
                    </div>
                    <div className="mt-2 mb-3">
                    <Button color="success" style={{width:'130px'}} onClick={addProduct}>
                      <FontAwesomeIcon className="mr-2" icon="plus"/>
                      <FormattedMessage {...messages.addProduct}/>
                    </Button>

                  </div>
                  </div>
                    <TableData
                      title=""
                      columns={Columns}
                      data={ProductList}
                      className="table"
                      noHeader={true}
                      pagination={true}
                      paginationServer={true}
                    />
                  </div>
              </Col>

这是数据表index.js：

import React, { memo } from 'react';
import styled from 'styled-components';
import { Table } from 'reactstrap';
import DataTable from 'react-data-table-component';
import StyledTableData from './StyledTableData';

const StyledThead = styled.thead`
color: #807777;
  th {
    padding-top: 1.5rem;
    padding-bottom: 1.5rem;
    text-align: center;
    border-bottom-width: 1px;
  }
`;
const StyledMessage = styled.div`
  padding: 1rem;
  width: 100%;
  display: flex;
  justify-content: center;
  background-color: rgb(240,249,252);
  >p {
    margin-bottom: 0;
    padding: 1rem 0;
  }
`;
function TableData(props) {
const noDataComponent = (
    <>
        <Table>
            <StyledThead>
                <tr>
                    {props && props.columns && props.columns.map((item, index) => (
                        <th key={index}>{item.name}</th>
                    ))}
                </tr>
            </StyledThead>
        </Table>
        <StyledMessage>
            <p>Không có dữ liệu bảng</p>
        </StyledMessage>
    </>
);
return <StyledTableData><DataTable {...props}  noDataComponent={noDataComponent}/></StyledTableData>;

---

}

实际上，你不能用数组中的push方法更新react组件状态，你应该使用react setState，或者正如我在你的例子中看到的那样，你应该使用setProductList来更新ProductList

因此，您应该使用以下内容：

const addProduct = () => {
  let newProduct = {
    productCode: ProductList[ProductList.length - 1].productCode + 1,
    productName: <Input type="text" defaultValue="" className="text-center" />,
    productDescription: <Input type="text" defaultValue="" className="text-center" />,
    productPrice: <Input type="number" defaultValue="" className="text-center" />,
    productQuantity: <Input type="number" defaultValue="" className="text-center" />,
    totalPrice: '',
    action: (
      <ButtonAsync color="danger">
        <FontAwesomeIcon className="mr-2" icon="times" />
        <FormattedMessage {...messages.deleteProduct} />
      </ButtonAsync>
    ),
  };

  setProductList([...ProductList, newProduct]);

  console.log(ProductList);
};

---

有很多，我现在就试试。事实上，我以前也试过这种方法，但有一些不同之处，根本不起作用。希望这次能成功…问题解决了，tks@Arman。。。直接使用setProductList，比如让newProductList=[…productList]；newProductList.pushnewProduct；setProductListnewProductList；瞧！，这对我有用