时间戳

首页 > 解决方案 > useState 异步问题它不会更新我的列表

reactjs - useState 异步问题它不会更新我的列表

问题描述

我试图在执行 API 调用之前设置 DataList。

但在执行 API 调用时 dataList 不包含任何内容。

我的代码按以下步骤运行。

  1. 单击按钮时->执行onSubmit（）。
  2. getSortedId 函数在执行 API 调用以获取排序数据之前运行。
  3. 执行 API 调用。

但由于缺少 dataList，我的 API 调用失败。

我知道钩子以异步方式运行。

但是我应该如何使用正确的 dataList 提交 API 调用。

 const [ dataList, setDataList ] = useState<any>([]); //set Hooks
//a filtering function
  async function getSortedId() {

       await selected.map(data => {
        console.log("transaction_id", data.transaction_id);

         //set sorted Data to datalist
        setDataList((dataList : any) => [...dataList, data.transaction_id]);
      })
  }

 const onSubmit = (data : any) => {
    let refundMsg = "";
    getSortedId();
  
    axios.put("/api/v1/updates", {
      params: {
        "refundIdList" : dataList, //dataList should have some value but it contains nothing.
        "refundReason" : refundMsg,
        "reasonEtcReason" : data.reasonEtcReason,
        "feeUserPay" : data.feeUserPay ? 1 : 0,
        "penaltyFeeUserPay" : data.penaltyFeePartnerPay ? 1 : 0,
        "penaltyFeeUtPay:" : data.penaltyFeeUtPay ? 1 : 0,
        "penaltyFeePartnerPay" : data.penaltyFeePartnerPay ? 1 : 0,       
      }
    }).then(res => {
      console.log("response", res);
    }).catch(err => { 
      console.log("Error : ", err);
    })
    }
  };
 return (
    <Button type="submit" onClick={onSubmit()} > Save </Button>
  )

标签： reactjs

解决方案

更改时您需要一个useEffect挂钩来调用 apidataList

const [dataList, setDataList] = useState<any>([]); //set Hooks
//a filtering function
  function getSortedId() {

  selected.map(data => {
    console.log("transaction_id", data.transaction_id);

    //set sorted Data to datalist
    setDataList((dataList: any) => [...dataList, data.transaction_id]);
  })
}

useEffect(() => {
  callApi()
}, [dataList])

const callApi = async () => {
  if (dataList && dataList.length > 0) {
    axios.put("/api/v1/updates", {
      params: {
        "refundIdList": dataList, //dataList should have some value but it contains nothing.
        "refundReason": refundMsg,
        "reasonEtcReason": data.reasonEtcReason,
        "feeUserPay": data.feeUserPay ? 1 : 0,
        "penaltyFeeUserPay": data.penaltyFeePartnerPay ? 1 : 0,
        "penaltyFeeUtPay:": data.penaltyFeeUtPay ? 1 : 0,
        "penaltyFeePartnerPay": data.penaltyFeePartnerPay ? 1 : 0,
      }
    }).then(res => {
      console.log("response", res);
    }).catch(err => {
      console.log("Error : ", err);
    })
  }

}


const onSubmit = (data: any) => {
  let refundMsg = "";
  getSortedId();
}

return (
  <Button type="submit" onClick={onSubmit()} > Save </Button>
)

推荐阅读