如何使用 React hook updater 函数的返回值？

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 是a setState function，你传递给 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>