第七色在线视频,2021少妇久久久久久久久久,亚洲欧洲精品成人久久av18,亚洲国产精品特色大片观看完整版,孙宇晨将参加特朗普的晚宴

為了賬號(hào)安全,請(qǐng)及時(shí)綁定郵箱和手機(jī)立即綁定
已解決430363個(gè)問題,去搜搜看,總會(huì)有你想問的

useEffect 返回未定義,即使“then”返回值響應(yīng)

useEffect 返回未定義,即使“then”返回值響應(yīng)

當(dāng)年話下 2023-11-02 17:04:25
我似乎無(wú)法弄清楚為什么 useEffect 會(huì)這樣做... Wait() 是一個(gè)睡眠異步函數(shù),getData() 是一個(gè) Axios 請(qǐng)求。        return wait().then(getData().then((resp) => {            console.log(resp)        }))此代碼記錄了 resp 變量的有效值,但在 return 語(yǔ)句中返回 undefined。發(fā)生了什么事以及如何讓它返回 resp 變量?編輯***const wait = React.useCallback( async() => {    if (loading === false) {        await sleep(4000);    } else if (loading === true){        await sleep(0);    } else {        await sleep(2000);    }}, [loading])const getData = React.useCallback(() => {    const value = Axios.post("http://localhost:3001/api/get-value",    {user: userProp}).then((response) => {        const recievedData = response.data;        const dataValue = recievedData.map((val) => {            return [val.value]        })            if (loading === true){                setLoading(false);            }        return parseInt(dataValue);    }).then((resp) => {        setMoisture(resp) // if I turn this off still no go.        return resp    })    return value}, [userProp, loading])const Data = React.useCallback(() => {    try {        return wait().then(getData)    } catch (error) {        setError(true);        return error;        }   }, [wait, getData])React.useEffect(() => {    let isEffect = false    if (props.location.state !== undefined) {        Data().then((firstResponse) => {            if (!isEffect){                setMoisture(firstResponse)            }        })    }    return () => {        isEffect = true;    }}, [props.location.state, Data, moisture]);  
查看完整描述

1 回答

?
一只甜甜圈

TA貢獻(xiàn)1836條經(jīng)驗(yàn) 獲得超5個(gè)贊

提供給 useEffect 的回調(diào)必須返回一個(gè)函數(shù)或未定義(如果提供了一個(gè)函數(shù),則這被認(rèn)為是一個(gè)清理函數(shù)。清理函數(shù)用于分離事件偵聽器,取消任何正在進(jìn)行的請(qǐng)求,并防止如果組件被卸載則進(jìn)行任何更新)


為了訪問您的http請(qǐng)求產(chǎn)生的響應(yīng),您應(yīng)該將其存儲(chǔ)在一個(gè)狀態(tài)中(您可以使用useState或useReducer)


const [rest, setResp] = React.useState();


React.useEffect(() => {

 wait().then(_ => getData()).then(setResp);

}, [YOUR_DEPENDENCIES]);


// update jsx based on rest

根據(jù)您問題中的更新,您需要的是輪詢


請(qǐng)查看下面的示例(請(qǐng)記住,這是說明可能的解決方案的代碼)


function usePolling(fetcher, interval) {

  const [payload, setPayload] = React.useState(null);

  

  React.useEffect(function () {

    // you must implement the error handling

    fetcher()

      .then(function (resp) {

        setPayload(resp)

      })

    

  }, [fetcher]);

  

  React.useEffect(function () {

    let timeoutId;

    

    function poll() {

      timeoutId = setTimeout(function () {

        // you must implement the error handling

        fetcher()

          .then(function (resp) {

            setPayload(resp)

            poll();

          })

      }, interval);

    }

    poll()

    

    return function () {

      clearTimeout(timeoutId);

    }

  }, [fetcher, interval]);

  

  return payload;

}



function App() {

  const payload = usePolling(function () {

    return Promise.resolve(Date.now())

  }, 3000);

  

 

  return (

    <div>polling payload: {payload}</div>

  )

}


ReactDOM.render(<App/>, document.getElementById('app'))

<!DOCTYPE html>

<html>

<head>

  <meta charset="utf-8">

  <meta name="viewport" content="width=device-width">

  <title>JS Bin</title>

  <script src="https://cdnjs.cloudflare.com/ajax/libs/react/17.0.1/umd/react.production.min.js"></script>

  <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.1/umd/react-dom.production.min.js"></script>

</head>

<body>

  <div id="app"></div>

</body>

</html>


查看完整回答
反對(duì) 回復(fù) 2023-11-02
  • 1 回答
  • 0 關(guān)注
  • 150 瀏覽
慕課專欄
更多

添加回答

舉報(bào)

0/150
提交
取消
微信客服

購(gòu)課補(bǔ)貼
聯(lián)系客服咨詢優(yōu)惠詳情

幫助反饋 APP下載

慕課網(wǎng)APP
您的移動(dòng)學(xué)習(xí)伙伴

公眾號(hào)

掃描二維碼
關(guān)注慕課網(wǎng)微信公眾號(hào)