Javascript 将react钩子与graphql一起使用时，onClick-in按钮元素不会触发react表中的重新渲染

我试图使用react table呈现一个表，但是，这个表具有从GraphQL数据库中提取的不同状态。每个按钮都应有效地为表呈现相同的UI，但仅显示具有与用户单击的按钮关联的正确状态的装运

我的发货查询如下：

import { gql } from 'apollo-boost';

export const GET_SHIPMENTS = gql`
      {
        shipments {
          created_at
          id
          status
          orders {
            order_items
          }
        }
      }
    `;

使用

GET\u装运

查询的My table组件如下所示：

import React, { useState } from "react";
import { graphql } from 'react-apollo';
import { GET_SHIPMENTS } from '../graphql/ShipmentQueries';
import ReactTable from 'react-table';

import {
  Card,
  CardBody,
  Row,
  ButtonGroup,
  Button
} from "reactstrap";

function OrderTable ({ loading, shipments }) {
  const [shownShipment, setShownShipment] = useState({status: "created"});

  const columns = [
    {
      Header: 'ID',
      accessor: 'id',
    },
    {
      Header: 'Status',
      accessor: 'status',
    },
    {
      Header: 'Item Count',
      accessor: 'orders[0].order_items'
    },
    {
      Header: 'Time Stamp',
      accessor: 'created_at',
    },
  ];

if (loading) return <p>Loading...</p>;
    return (
        <div className="content">
            <ButtonGroup className="center">
                <Button 
                  name="created" 
                  onClick={() => setShownShipment(shownShipment.status === "created")}
                >
                  Created
                </Button>

                <Button 
                  name="awaiting driver" 
                  onClick={() => setShownShipment(shownShipment.status === "awaiting_driver")}
                >
                  Awaiting Driver
                </Button>

                <Button 
                  name="delivered" 
                  onClick={() => setShownShipment(shownShipment.status === "delivered")}
                >
                  Delivered
                </Button>
            </ButtonGroup>
          <Row className="mt-5">
              <Card>
                <CardBody>
                  <ReactTable
                    data={shipments}
                    columns={columns}
                    sortable={true}
                    resizable={false}
                    minRows={10}
                  />
                </CardBody>
              </Card>
          </Row>
        </div>
    );
  }

  export const OrderTableWithData = graphql(GET_SHIPMENTS, {
    props: ({data: { loading, shipments, shownShipments }}) => ({
      loading,
      shipments,
      shownShipments,
    }),
  })(OrderTable);

// at the top of the component
var [shipmentsToDisplay, setShipmentsToDisplay] = useState([]);

useEffect(() => {
    // loop through all shipments and create a new array for only the ones 
    // you want to show.
    const filteredShipments = 
        shipments && 
            shipments.map(shipment => {
                if (shipment.status === shownShipment) {
                    return shipment;
                }
            }

    setShipmentsToDisplay(filteredShipments);
}, [shownShipment, shipments]);


// Render your table with these shipments rather than props.shipments
<ReactTable
    data={shipmentsToDisplay}
    columns={columns}
    sortable={true}
    resizable={false}
    minRows={10}       
/>

import React，{useState}来自“React”；
从'react apollo'导入{graphql}；
从“../graphql/shipmentquerys”导入{GET_shippings}；
从“反应表”导入反应表；
进口{
卡片
名片夹，
一行
按钮组，
按钮
}从“反应带”；
函数OrderTable（{loading，Shippings}）{
const[shownShipment，setShownShipment]=useState（{status:“created”}）；
常量列=[
{
标题：“ID”，
访问者：“id”，
},
{
标题：“状态”，
访问者：“状态”，
},
{
标题：“项目计数”，
访问器：“订单[0]。订单项”
},
{
标题：“时间戳”，
访问器：“已在“”处创建，\u”，
},
];
如果（加载）返回加载…
；
返回(
setShownShipment（shownShipment.status==“已创建”）}
>
创建
setShownShipment（shownShipment.status==“等待驱动程序”）}
>
等待司机
setShownShipment（shownShipment.status==“已交付”）}
>
交付
);
}
导出常量OrderTableWithData=graphql（获取装运{
道具：（{数据：{装载、装运、展示设备}}）=>({
加载，
装运，
展示设施，
}),
})（订单表）；

---

这是我第一次介绍如何使用钩子，所以我知道我可能没有正确地使用钩子。我不确定是否必须使用

useffect

挂钩。我查了一下文件，似乎找不到明确的答案。我觉得

useState

应该可以工作。是否必须重新呈现整个ReactTable元素？

如果希望shownShipment.status是与交付状态（如“已交付”、“等待驱动程序”）等相对应的字符串，则按钮单击代码应如下所示：

onClick={() => setShownShipment({status: "delivered"}) }

尝试向react组件添加如下效果，以在单击每个按钮后查看状态更新：

useEffect(() => { console.log(shownShipment); }, [shownShipment]);

现在已将shownShipment设置为所需的状态，您可以基于此筛选GQL中的装运总列表。再次使用state查看实际提供给表的装运列表。useEffect在这里也会有帮助。大概是这样的：

import React, { useState } from "react";
import { graphql } from 'react-apollo';
import { GET_SHIPMENTS } from '../graphql/ShipmentQueries';
import ReactTable from 'react-table';

import {
  Card,
  CardBody,
  Row,
  ButtonGroup,
  Button
} from "reactstrap";

function OrderTable ({ loading, shipments }) {
  const [shownShipment, setShownShipment] = useState({status: "created"});

  const columns = [
    {
      Header: 'ID',
      accessor: 'id',
    },
    {
      Header: 'Status',
      accessor: 'status',
    },
    {
      Header: 'Item Count',
      accessor: 'orders[0].order_items'
    },
    {
      Header: 'Time Stamp',
      accessor: 'created_at',
    },
  ];

if (loading) return <p>Loading...</p>;
    return (
        <div className="content">
            <ButtonGroup className="center">
                <Button 
                  name="created" 
                  onClick={() => setShownShipment(shownShipment.status === "created")}
                >
                  Created
                </Button>

                <Button 
                  name="awaiting driver" 
                  onClick={() => setShownShipment(shownShipment.status === "awaiting_driver")}
                >
                  Awaiting Driver
                </Button>

                <Button 
                  name="delivered" 
                  onClick={() => setShownShipment(shownShipment.status === "delivered")}
                >
                  Delivered
                </Button>
            </ButtonGroup>
          <Row className="mt-5">
              <Card>
                <CardBody>
                  <ReactTable
                    data={shipments}
                    columns={columns}
                    sortable={true}
                    resizable={false}
                    minRows={10}
                  />
                </CardBody>
              </Card>
          </Row>
        </div>
    );
  }

  export const OrderTableWithData = graphql(GET_SHIPMENTS, {
    props: ({data: { loading, shipments, shownShipments }}) => ({
      loading,
      shipments,
      shownShipments,
    }),
  })(OrderTable);

// at the top of the component
var [shipmentsToDisplay, setShipmentsToDisplay] = useState([]);

useEffect(() => {
    // loop through all shipments and create a new array for only the ones 
    // you want to show.
    const filteredShipments = 
        shipments && 
            shipments.map(shipment => {
                if (shipment.status === shownShipment) {
                    return shipment;
                }
            }

    setShipmentsToDisplay(filteredShipments);
}, [shownShipment, shipments]);


// Render your table with these shipments rather than props.shipments
<ReactTable
    data={shipmentsToDisplay}
    columns={columns}
    sortable={true}
    resizable={false}
    minRows={10}       
/>

//在组件的顶部
var[shipmentsToDisplay，setShipmentsToDisplay]=useState（[]）；
useffect（（）=>{
//循环检查所有装运，并仅为装运的装运创建一个新数组
//你想表现出来。
常量筛选器发货=
装运和
装运。映射（装运=>{
如果（shipping.status==shownShipment）{
退货；
}
}
设置shipmentstodisplay（过滤发货）；
}，[展示设备、装运]；
//使用这些装运而不是道具装运呈现表格

此代码的解决方案如下： （为了简洁起见，删除了一些代码）

函数OrderTable（{加载，装运}）{
const[shipmentsToDisplay，setShipmentsToDisplay]=useState（[]）；
useffect（（）=>{
如果（装运）{
过滤设备（“已创建”）；
}
}，[装运]；
功能过滤器设备（状态）{
让shownShipments=[]；
装运。forEach（元素=>{
if（element.status==状态）{
shownShipments.push（元素）；
}
});
设置shipmentstodisplay（显示设备）；
}
如果（装载）返回；
返回(
过滤器设备（“已创建”）}>
悬而未决的
过滤器设备（“等待驱动程序”）}>
准备好的
过滤器设备（“已交付”）}>
完整的
{
返回(
)
}}
/>
);
}
导出常量OrderTableWithData=graphql（获取装运{
道具：（{数据：{装载，装运}}）=>({
加载，
装运
}),
})（订单表）；

解决方案是在

挂起的

装运上着陆，因此对于我所在的州，我使用

useffect

钩子将已创建的装运作为状态着陆

---

对于我的onClick函数，我决定从创建的

装运开始筛选每个装运，并根据与按钮单击关联的状态更新状态。我不知道这是否有意义。我不熟悉hooks和GraphQL。
以这种方式调用按钮上的setShownShipment时，您正在设置hownShipment根据当前状态变为true或false。因此，它从“创建”开始，然后变为true或false。这就是您的意图吗？我想您可能正在尝试执行类似“设置hownShipment”（{status:'delivered'）的操作'在delivered button press案例中。我不一定要说状态为true或false。我要更改状态，从而更新表的状态，以便显示，如果他们单击
delivered
按钮，状态应更新为
delivered
，然后使表仅显示已发送的装运重新投递。也许在我的钩子里，我应该