在 useEffect 中更新后未获取 useState 变量更新值答案

【问题标题】：not getting useState variable updated value after updating it in useEffect在 useEffect 中更新后未获取 useState 变量更新值
【发布时间】：2021-09-09 08:24:58
【问题描述】：

在 useEffect 中更新后，我没有得到 useState 变量（selectedItem）的更新值。我有 2 个 useEffect 第一个依赖数组为空，我正在根据角色更改下拉值。

在 Second UseEffect Dependency 数组中，我有 DropDown 值，当我访问 DropDown 值时，我总是得到我的 Dropdown 的默认值。我无法理解为什么会发生这种情况以及如何解决它。如何根据其他 useEffect 中的角色获取 selectedItem 值。

import { IDropdownOption } from '@fluentui/react';
import React from 'react';
import { useState } from 'react';

const [selectedItem, setSelecteditem] = useState<IDropdownOption>({
  key: "Default",
  text: "Default",
});

function MyFirstComponent(props: any)
{
 React.useEffect(() => {
    async function setDropDownValue() {
      if (props.userRole == "Admin") {
        setSelecteditem({
          key: "Admin",
          text: "Admin",
        });
      } else if (props.userRole == "Support") {
        setSelecteditem({
          key: "Support",
          text: "Support",
        });
      } else {
        setSelecteditem({
          key: "Default",
          text: "Default",
        });
      }
    }
    setDropDownValue();
  }, []);



 React.useEffect(() => {
   async function setDetailsBasedOnDropDownValue() {
     if (selectedItem?.key == "Admin")
     {
      //Business Logic
     } 
     else if (selectedItem?.key == "Support") 
     {
      //Business Logic
     } 
     else
      {
        //Business Logic
     }
   }
   setDetailsBasedOnDropDownValue();
 }, [selectedItem.key]);

}

【问题讨论】：

标签： fluent-ui fluentui-react

【解决方案1】：

由于setDetailsBasedOnDropDownValue 依赖于selectedItem，因此当依赖值发生变化时，您必须重新创建函数。否则，您的函数将始终在创建时看到 selectedItem 的值。

只需在下面运行代码sn-p。

const { useState, useEffect, useCallback } = React;

const App = (props) => {
  const [selectedItem, setSelecteditem] = useState({
    key: "Default",
    text: "Default"
  });

  useEffect(() => {
    function setDropDownValue() {
      if (props.userRole === "Admin") {
        setSelecteditem({
          key: "Admin",
          text: "Admin"
        });
      } else if (props.userRole === "Support") {
        setSelecteditem({
          key: "Support",
          text: "Support"
        });
      } else {
        setSelecteditem({
          key: "Default",
          text: "Default"
        });
      }
    }
    setDropDownValue();
  }, []);
  
  const setDetailsBasedOnDropDownValue = useCallback(() => {
    function setDetailsBasedOnDropDownValue() {
      if (selectedItem.key === "Admin") {
        console.log("ADMIN Business Logic");
      } else if (selectedItem.key === "Support") {
        console.log("Support Business Logic");
      } else {
        console.log("Other Business Logic");
      }
    }
    setDetailsBasedOnDropDownValue();
  }, [selectedItem]);

  useEffect(setDetailsBasedOnDropDownValue, [selectedItem]);

  const setSelectedItem = (key, text = key) => {
     setSelecteditem({
          key,
          text
     });
  }

  return (
    <div class="container">
       <div class="row">
          <div class="col">
          <pre><code>
             {JSON.stringify(selectedItem, undefined, 2)}
          </code></pre>
          </div>
          <div class="col-8">
             <button type="button" class="btn btn-primary" onClick={() => setSelectedItem("Admin")}>Set Admin</button>
             <button type="button" class="btn btn-primary" onClick={() => setSelectedItem("Support")}>Set Support</button>
             <button type="button" class="btn btn-primary" onClick={() => setSelectedItem("Default")}>Set Default</button>
          </div>          
       </div>
       
    </div>
          
  );
};

ReactDOM.render(<App userRole="Admin" />, document.getElementById("root"));

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<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>

【讨论】：