Question

第一，请忽略我的英语不好。我是一个较新的reactJS，在撰写标题时遇到了一个问题。我看到成功通过array.push（）将更多产品添加到ProductList中，但是表未更新... 另外，我尝试了类似use setState的方法，但是没有用。我仍然很困惑，希望有人向我展示解决方法，对此深表感谢！

这是index.js文件中的列：

{
"name": "Instgram As Progressive Web App",
"short_name": "PWAGram",
"icons": [
{
"src": "/src/images/icons/app-icon-48x48.png",
"type": "image/png",
"sizes": "48x48"
},
{
"src": "/src/images/icons/app-icon-96x96.png",
"type": "image/png",
"sizes": "96x96"
},
{
"src": "/src/images/icons/app-icon-144x144.png",
"type": "image/png",
"sizes": "144x144"
},
{
"src": "/src/images/icons/app-icon-192x192.png",
"type": "image/png",
"sizes": "192x192"
},
{
"src": "/src/images/icons/app-icon-256x256.png",
"type": "image/png",
"sizes": "256x256"
},
{
"src": "/src/images/icons/app-icon-384x384.png",
"type": "image/png",
"sizes": "384x384"
},
{
"src": "/src/images/icons/app-icon-512x512.png",
"type": "image/png",
"sizes": "512x512"
}
],
"start_url": "/index.html",
"scope": ".",
"display": "standalone",
"orientation": "portrait-primary",
"prefer_related_applications": false,
"background_color": "#FFF",
"theme_color": "#3f51b1",
"description": "A simple Instgram Clone, Implementing a lot of PWA",
"dir": "ltr",
"lang": "en-US"
}

这是表的数据：

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);

这是数据表index.js：

<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>

}

Answer 1

实际上，您无法使用数组中的push方法来更新react组件的状态，您应该使用react setState或在示例中您看到的是using hooks使用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);
};

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

1 个答案: