反应：状态有不同的值，这取决于您询问的位置

Question

我有一个改变状态的按钮列表，一个字符串（用于决定是否显示一个模态，作为这个模态的标题）。应该发生什么：

• 1. 如果没有显示模态，单击这些按钮中的任何一个都应该更改打开模态并设置其标题。

第1点和第3点很好。但2不是。所以我决定在那里放一些console.log。如果我在链接到我的状态的useEffect中登录：每个按钮上的标题状态都会更改，这应该会更改，但它永远不会被清除。

因此，我登录到处理程序函数中（单击按钮时触发）：

• 标题状态始终显示为空字符串，即使模式中有标题

就这样，对我来说没有任何意义。如果有帮助的话，下面是我代码的一部分：

js prettyprint-override">  const [logsModalTitle, setLogsModalTitle] = useState("");
...
  const handlingLogs = (inputClause) => {
    console.log("handling logs : ", showLogsModal, logsModalTitle);
    if (`${inputClause.name}(${inputClause.label})` === logsModalTitle) {
      setLogsModalTitle("");
    } else {
      setLogsModalTitle(`${inputClause.name}(${inputClause.label})`);
    }
  };
...
  <MyCustomButton
                buttonInnerText="ERROR"
                buttonSize="medium"
                buttonActionFunctionOne={handlingLogs}
                buttonActionPropOne={input.clauses[i]}
              />
...
  useEffect(() => {
    console.log(logsModalTitle);
  }, [logsModalTitle]);

Answer 1

在我看来，这确实是奇怪的代码，但这可能行得通：

const handlingLogs = (inputClause) => {
  if (`${inputClause.name}(${inputClause.label})` === logsModalTitle) {
    setLogsModalTitle("");
    setShowLogsModal(false);
  } else {
    setShowLogsModal(true);
    setLogsModalTitle(`${inputClause.name}(${inputClause.label})`);
  }
};

您可以只使用一个状态，即showLogsModal=logsModalTitle！=="";

const [logsModalTitle, setLogsModalTitle] = useState("");

const handlingLogs = (inputClause) => {
  if (`${inputClause.name}(${inputClause.label})` === logsModalTitle) {
    setLogsModalTitle("");
  } else {
    setLogsModalTitle(`${inputClause.name}(${inputClause.label})`);
  }
};

const showLogsModal = logsModalTitle !== "";