javascript - 我必须点击两次才能更新我的状态

Question

所以基本上，我试图在单击按钮后根据一些搜索参数从 API 调用获得的结果动态呈现表格。我的问题是，当我第一次输入搜索参数并单击搜索按钮时，它工作得很好，但是当我更新搜索参数并单击搜索时，它会显示旧数据，同时，在我的控制台中，我可以看到我的 redux 状态已更新。然后，在更新表格之前，我必须再次单击搜索按钮。

我的代码

const queryResult = useSelector(
    (state) => state.certificateReducer.queryResult,
  );
  const [query, setQuery] = useState([]);
onFinish=()=>{
setQuery(
      queryResult?.map((item) => {
        return {
          actualId: item.id,
          id: 1,
          certificateNo: item.certificateNumber,
          oldCertificateNo: item.oldCertificateNumber,
          accountNo: item.holderCscsAccountNumber,
          oldAccountNo: item.oldHolderCscsAccountNumber,
          shareHolderName: item.holderName,
          holderAddress: item.holderAddress,
          clientCompany: item.issuingCompanyName,
          shareVolume: item.volumeOfBonds,
          isSelected: false,
        };
      }),
    );
}
const handleClick = (event) => {
    let a = [...query];
    a.map((item) => {
      if (item.id == event.target.value) {
        item.isSelected = !item.isSelected;
      }
    });
    setQuery(a);
  };

我在哪里呈现查询：

 {query?.map((item, j) => {
                    return (
                      <tr key={j}>
                        <td>{item.id + j}</td>
                        <td>{item.certificateNo}</td>
                        <td>{item.oldCertificateNo}</td>
                        <td>{item.accountNo}</td>
                        <td>{item.oldAccountNo}</td>
                        <td>{item.shareHolderName}</td>
                        <td>{item.holderAddress}</td>
                        <td>{item.clientCompany}</td>
                        <td>{item.shareVolume}</td>

                        <td>
                          <Button
                            value={item.id}
                            onClick={handleClick}
                            style={{
                              cursor: 'pointer',
                              background: '#299F9E 0% 0% no-repeat padding-box',
                              borderRadius: '50%',
                              height: '30px',
                              width: '30px',
                              padding: '2px',
                              justifyContent: 'center',
                            }}>
                            <img src={NavigationMore} alt="" />
                          </Button>
                        </td>
                        {item.isSelected ? (
                          <MoreActions
                            handleSelected={handleSelected}
                            handleModal={handleModal}
                          />
                        ) : null}
                      </tr>

标签： javascriptreactjsreact-reduxreact-hooks