如何使用 React 鈎子更新程序函數的返回值？

Question

我使用以下代碼作為我的狀態（內部鈎子）的更新程序函數。

雖然控制台輸出在回調內部正常工作，但我如何訪問外部的值。 我正在返回someStatus並將其分配給x 。 但是x打印為undefined 。

下面的代碼有問題嗎？

let x = setSomeStatus((someStatus) => {
    console.log("Some Status :::: :" + someStatus); // "XYZ"
    return someStatus;
});
console.log("x = " + x); // undefined

---

我按照建議在下面嘗試，但仍然沒有在回調之外獲得更新的值；

setSomeStatus((someStatus) => {
    console.log("File Status :::: :" + someStatus); // "XYZ"
    return someStatus;
});
console.log("someStatus = " + someStatus);

---

下面似乎可以正常工作（請確認它是否看起來不錯）

const onCellClicked = (e) => {
        if (e.data.status !== 'TO') {
            console.log(e);
            //let fileStatus;
            let fileType = (e.data.status === 'Y') ? 'O' : 'I';
            setCurrentFileStatus(e.data.status);
            setFileType(fileType);

            var tempObj = {};
            setCurrentFileStatus((fileStatus) => {
                setFileType((fileType) => {
                    tempObj.currentFileStatus = fileStatus;
                    tempObj.summaryDate = form.dateField;
                    tempObj.fileType = fileType;
                });             
            });
            setSharedData(tempObj);
            console.log("tempObj = " + tempObj);
        }
    }

Answer 1

假設setSomeStatus是一個 setState 函數，則傳遞給 setState 的回調的 return 語句將僅從回調返回，並因此設置狀態，但實際上不會從setState函數返回值。

由於您已經定義了一個狀態，因此您無需將其存儲在單獨的變量中（在您的情況下為x ），您可以直接訪問它。

 const { useState } = React; const App = () => { const [someState, setSomeState] = useState(); return ( <div> <p>Type something to change the state</p> <input onInput={(e) => setSomeState((prev) => { console.log("changing the state from", prev, "to", e.target.value); return e.target.value; }) } /> <h2>The state is {someState}</h2> </div> ); }; // Render it ReactDOM.render(<App />, document.getElementById("root"));

 <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> <div id="root"></div>

Answer 2

您setSomeStatus使用新值調用setSomeStatus ：

const[someStatus, setSomeStatus] = useState('');

setSomeStatus(someStatus + x);