数据已更新，材料表直到刷新才显示更新

如何解决数据已更新，材料表直到刷新才显示更新

我遇到了问题，可以寻求帮助。我正在使用apollo客户端来获取一些潜在客户数据并将其传递到物料表中（效果很好）。我有一个侧面抽屉，它在单击行时打开了动态行数据，并且在侧面抽屉中有一个允许用户更新行数据的表格。但是，直到我刷新页面，material-table才会呈现更新。

Leads.js是获取线索的父组件，并使用react挂钩将线索设置为状态。

Leads.js

const Leads = () => {

    const [userLeadsLoaded,setUserLeadsLoaded] = React.useState(false);
    const [userLeads,setUserLeads] = React.useState([]);
    const { isAuthenticated,user,loading } = useAuth()

    const params = { id: isAuthenticated ? user.id : null };

    const {
        loading: apolloLoading,error: apolloError,data: apolloData,} = useQuery(GQL_QUERY_ALL_LEADS,{
        variables: params,});

    useEffect(() => {
        if (apolloData) {
            if (!userLeadsLoaded) {
                const { leads } = apolloData;
                const editable = leads.map(o => ({ ...o }));
                setUserLeads(editable);
                setUserLeadsLoaded(true);
            };
        }
    },[apolloData])

    if (apolloError) {
        console.log(apolloError)
        //Todo: Do something with the error,ie default user?
        return (
            <div>
                <div>Oh no,there was a problem. Try refreshing the app.</div>
                <pre>{apolloError.message}</pre>
            </div>
        );
    };
    return (
        <>
                {apolloLoading
                    ? (<CircularProgress variant="indeterminate" />)
                    : (<LeadsTable leads={userLeads} setLeads={setUserLeads} />)
                }
        </>
    )
}

export default Leads

LeadsT​​able.js是我将线索作为道具的地方，并将其传递到物料表中。有一个onRowClick事件可打开带有动态潜在客户详细信息的侧抽屉。

LeadsTable.js

const LeadsTable = ({ leads,setLeads }) => {
  const classes = useStyles();
  const { user } = useAuth();
  const [isLeadDrawerOpen,setIsLeadDrawerOpen] = React.useState(false);
  const [selectedRow,setSelectedRow] = React.useState({});
  const columns = React.useMemo(() => columnDetails);

  const handleClose = () => {
    setIsLeadDrawerOpen(!isLeadDrawerOpen);
  }

  return (
    <>
      <MaterialTable
        title='Leads'
        columns={columns}
        data={leads}
        icons={tableIcons}
        options={{
          exportButton: false,hover: true,pageSize: 10,pageSizeOptions: [10,20,30,50,100],}}
        onRowClick={(event,row) => {
          console.log('Selected Row:',row)
          setSelectedRow(row);
          setIsLeadDrawerOpen(true);
        }}
        style={{
          padding: 20,}}
      />
      <Drawer
        variant="temporary"
        open={isLeadDrawerOpen}
        anchor="right"
        onClose={handleClose}
        className={classes.drawer}
      >

        <LeadDrawer onCancel={handleClose} lead={selectedRow} setLeads={setLeads} leads={leads} />

      </Drawer>
    </>
  );
};

export default LeadsTable;

LeadDrawer.js具有导航选项卡，更新表单位于此处的概述选项卡中。您可以看到我正在传递setLeads和Leads道具

Overview.js

const Overview = (props) => {
    const classes = useStyles();
    const { lead,leads,setLeads } = props;
    const { user } = useAuth();

    return (
        <>
               //this is the form to update a leads information
               <AddAdditionalInfo setSelectedRow={setSelectedRow} leads={leads} setLeads={setLeads} lead={lead} />
        </>
    )
};

export default Overview;

最后在AddAdditionalInfo表单中，我有一个句柄提交函数，该函数运行一个apollo变异以将数据库中的线索更新，并将setLeads更新为新的更新线索。

AddAdditionalInfo.js

const handleSubmit = async (event) => {
        event.preventDefault();

        const updatedLead = {
            id: leadState.id,first_name: leadState.firstName,last_name: leadState.lastName,email_one: leadState.email,address_one: leadState.addressOne,address_two: leadState.addresstwo,city: leadState.city,state_abbr: leadState.state,zip: leadState.zipCode,phone_cell: leadState.phone,suffix: suffix,address_verified: true
        }
        const { data } = await updateLead({
            variables: updatedLead,refetchQueries: [{ query: GQL_QUERY_GET_USERS_LEADS,variables: { id: user.id } }]
        })
        const newLeads = updateIndexById(leads,data.updateLead)
        setLeads(state => newLeads)
        handleClose()
    };

摘要：我将通过调用setLeads来更新销售线索状态，除非刷新页面，否则material-table不会呈现更改。我并不是假设材料表有问题，我只是在寻求帮助，或者是第二只眼睛。我在这个小问题上停留了太久了。也许我只是需要一种不同的方法...任何想法或帮助都将不胜感激。