Javascript 如何检查useState变量何时可用

我使用了基于已解决承诺设置的状态变量，设置后如何访问该变量
目前，要获得正确的值，我必须使用setTimeout函数，只是想知道是否有更好的方法

const FlagScreen = ({ t, i18n, history }) => {
  const [flagAvailability, setFlagAvailability] = useState([]);
  const [showFlags, setShowFlags] = useState([]);

  useEffect(() => {
    let flagsAvailable = [];
    for (let [key, value] of Object.entries(flags)) {
      if (key.indexOf(i18n.language) !== -1) {
        for (const v of value) {
          checkForAvailableAgent(`sales_${v}`, LINK_TO_STUDIO, SERVICE_ID)
            .then(res => {
              flagsAvailable[v] = res;
              // Sets the flags availability i.e de: false, en: true
              setFlagAvailability(flagsAvailable);
            })
            .catch(error => {
              console.log("an error happened.");
            });
        }
      }
    }
  }, [i18n.language]);

 useEffect(() => {
      //the value of flagAvailability is not available yet, I have to set a timeout function for 
      // 3 seconds for it to be available
      console.log("flag availability: ", Object.entries(flagAvailability));
      for (let [k, v] of Object.entries(flagAvailability)) {
        console.log("key is: ", k);
        if (v === true) {
          setShowFlags(k);
        }
      }
  }, [flagAvailability]);
}

<Container className="h-100">
  <Row className="h-45 mt-5 text-center">
    {ALL_STUDIOS_FLAGS.filter(item => {
        return showFlags.includes(item);
     }).map((item, index) => (
        <Col key={index}>
         <img
          src={require(`../assets/flags/${item}.png`)}
          alt={`${item} flag`}
         />
         <span>{item.toUpperCase()}</span>
       </Col>
    ))}
 </Row>

constflagscreen=（{t，i18n，history}）=>{
const[flagAvailability，setFlagAvailability]=useState（[]）；
const[showFlags，setShowFlags]=useState（[]）；
useffect（（）=>{
设flagsAvailable=[]；
for（让对象的[key，value]项（标志））{
if（键索引of（i18n.语言）！=-1）{
用于（常数v值）{
checkForAvailableAgent（`sales${v}`，链接到工作室，服务ID）
。然后（res=>{
flagsAvailable[v]=分辨率；
//设置可用性标志，即de:false、en:true
setFlagAvailability（flagsAvailable）；
})
.catch（错误=>{
log（“发生错误”）；
});
}
}
}
}，[i18n.语言]；
useffect（（）=>{
//flagAvailability的值还不可用，我必须为设置一个超时函数
//3秒后即可使用
log（“标志可用性：”，Object.entries（标志可用性））；
for（让[k，v]的Object.entries（flagAvailability））{
日志（“键为：”，k）；
如果（v==真）{
设置显示标志（k）；
}
}
}，[flagAvailability]）；
}
{ALL_STUDIOS_FLAGS.filter（项=>{
返回显示标志。包括（项目）；
}).map（（项目、索引）=>(
{item.toUpperCase（）}
))}

---

将通知任何帮助，

设置FlagAvailability（FlagSavaailable）将仅在第二个渲染中更新flagAvailability的值

第一次渲染中的第二个useEffect将只获得flagAvailability的初始值（我知道它像一个圆）

每个渲染都有自己的useEffect和useState

解决方案之一是通过创建如下useRef标志跳过setShowFlags useEffect中的第一个渲染

const ref = useRef(false)
const [flagAvailability, setFlagAvailability] = useState(true);
const [showFlags, setShowFlags] = useState(true);

useEffect(()=> {
  if(ref.current){
    ...
    setShowFlags();
    ref.current = false;
  }
},[flagAvailability])

useEffect(() => {
  ...
  setFlagAvailability();
  ref.current = true
},[i18n.language])

或者，您可以简单地将flagAvailability更改为useRef，因为refvalue将始终是新值

const flagRef = useRef([]])
const [showFlags, setShowFlags] = useState(true);

useEffect(() => {
  flagRef.current = flagsAvailable
},[i18n.language])

useEffect(()=> {
  for (let [k, v] of Object.entries(flagRef.current)) {
    setShowFlags();
  }
},[showFlags])

---

如果变量为null，您是否尝试过返回null或加载页，然后在使用后再正常使用？没有，请您再详细说明一点。因此，在使用变量之前，请编写

如果（！flagAvailability.length）返回null

。然后，一旦加载，其余的代码将在此之后执行。例如，这里有一些我写的符合我的意思的东西，很好地产生了这个错误：TypeError:destroy不是commitHookEffectList中的一个函数，它可能会有所帮助，但看起来你并没有从useffects返回任何东西