0

在使用 RefetchQueries 进行变异时，我在页面中遇到了一些问题。

我有一个带有复选框的项目列表

ItemList（父组件），ToolBar（子组件）

在子组件中，我有一个删除按钮，可以在从项目列表中选择项目后单击该按钮。我通过道具将选定的项目传递给子组件。

单击删除按钮时，它应该调用getTransactions查询。根据结果​​，如果有任何交易可用，我必须显示模式并单击“确定”我必须删除这些项目。

<a className="flat-b" id="delete-checked" title="Move to Trash" onClick={() => getTransactions({variables:{itemIds: selectedItemIds}})} style={iconStyle}>
   <i className="fas fa-trash"></i>
</a>

const [getTransactions, { loading, data }] = useLazyQuery(GET_TXNS);
const [TrashMuation, {loading: trashLoading, data:trashData}] = useMutation(trashMutation, {
        refetchQueries: [{query: GET_ITEMS, variables: queryVariables}]
    });

if (data) {
   if (transactionItems) {
      return <div>
                    <div id="mpn-modal-ol-div" className="mpn-modal-wrap" onClick={checkBubble}>
                        <div className="sp-lightbox" style={{maxHeight}}>
                            <h4 style={{width: '94%', textAlign: 'center', borderBottom: '1px solid #f2f4f9', padding: '20px 3%', fontSize: '1.3em'}}>
                                Transactions exist
                            </h4>
                            <section style={{overflowY: 'auto', maxHeight: `${maxHeight - 197}px`, margin: '24px 3%', width: '94%'}}>
                                Are you sure you want to delete the following item(s)? You already have transactions made against them.  
                                {transactionItemTitles}
                            </section>
                            <div style={{width: '94%', textAlign: 'center', borderTop: '1px solid #f2f4f9', margin: '0 3% 15px 3%', paddingTop: '15px'}}>
                                <button className="sp-button grey" onClick={() => onCancel()}>
                                    <div>Cancel</div>
                                </button>
                                <button onClick={() => TrashMuation({variables: {ids: selectedItemIds}})} className="sp-button teal refund ml-10">
                                    <div>OK</div>
                                </button>
                            </div>
                        </div>
                    </div>
                </div>
   } else {
      TrashMuation({variables: {ids: selectedItemIds}});
   }
}

在删除多个项目时，我必须检查所选项目是否有可用的交易。

现在删除工作正常，但突变 api 调用多次，查询 api 调用多次。我无法弄清楚。

如果我更改 if(data) 中的 if else 语句，则会给出错误cannot update during state transition。

请帮助实现目标。

4

0 回答 0