javascript - 如何将整个数组添加到 useState 变量

Question

我试图将整个数组添加到 useState 变量，但我一直得到 null，该程序应该做的是首先检查默认工作室是否可用并将其添加到 defaultStudioAvailable 然后将该工作室从 studio 数组中取出，然后再检查所有其他工作室并将它们添加到others array with the line others[studio] = res;并将其添加到状态变量 otherStudiosAvailable，但是我在 others 数组中获得了正确的详细信息，但没有任何内容被添加到 otherStudiosAvailable 状态数组，

谁能看出我做错了什么？任何帮助将不胜感激。

const Home = ({i18n}) => {

  const [defaultStudioAvailable, setDefaultStudioAvailable] = useState();
  const [otherStudiosAvailable, setOtherStudiosAvailable] = useState([]);

  const studios = ["de", "fr", "pl", "en", "nl", "ru"];
  const otherStudios = studios.filter(item => {
    return item !== i18n.language;
  });

 useEffect(() => {

 let others = [];

    checkForAvailableAgent(
      `sales_${i18n.language}`,
      "LinkToStudio",
      "ServiceID"
    )
      .then(res => {
        setDefaultStudioAvailable(res);
      })
      .catch(error => {
        console.log("an error happened.");
      });

   for (const studio of otherStudios) {
      checkForAvailableAgent(
        `sales_${studio}`,
        "LinkToStudio",
        "ServiceID"
      )
        .then(res => {
          // this has the correct values
          others[studio] = res;
          // this keeps being null even though others have values
          setOtherStudiosAvailable(others);
        })
        .catch(error => {
          console.log("an error happened.");
        });
    }

    console.log("others[studio]: ", others);
    console.log("other studios available: ", otherStudiosAvailable);
  }, [defaultStudioAvailable, i18n.language]);
}

// console output

others[studio]:  [en: false, fr: false, nl: false, pl: false, ru: false]

other studios available:  []




{defaultStudioAvailable ? (
        <Button
          variant="success"
          className="btn-xlarge"
          onClick={e => callBtnClick("direct")}
        >
          {t("callBtn")}
        </Button>
       ) : otherStudiosAvailable ? (
       <Button
          variant="success"
          className="btn-xlarge"
          onClick={e => callBtnClick("flag")}
        >
          Other studios available
        </Button>
      ) : (
    ""
  )}

Answer 1

问题是 useState fns 的异步特性

在 setState fn 更新值之前，您在同一个 useEffect() 中 console.log()。

useEffect(() => {
 let others = [];
 checkForAvailableAgent(
      `sales_${i18n.language}`,
      "LinkToStudio",
      "ServiceID")
   .then(res => { setDefaultStudioAvailable(res); })
   .catch(error => { console.log("an error happened."); });

 for (const studio of otherStudios) {
   checkForAvailableAgent(
        `sales_${studio}`,
        "LinkToStudio",
        "ServiceID"
   )
   .then(res => {
       others[studio] = res; // here you are not using the updated value anywhere, so no problem here
      setOtherStudiosAvailable(others); // the asynchronous setState has been called, the callback can be obtained with a useEffect on the updated state value
   })
   .catch(error => {console.log("an error happened."); });
 }
    console.log("others[studio]: ", others); //using a local variable, should log fine
    console.log("other studios available: ", otherStudiosAvailable); // the otherStudiosAvailable has not been updated yet., uses the previous value []
  }, [defaultStudioAvailable, i18n.language]);
}

要获取更新后的值，使用Effect on otherStudiosAvailable

useEffect(() => console.log(otherStudiosAvailable), [otherStudiosAvailable])

更新

代替多个条件运算符，最好将结构简化为

{defaultStudioAvailable && (
        <Button
          variant="success"
          className="btn-xlarge"
          onClick={e => callBtnClick("direct")}
        >
          {t("callBtn")}
        </Button>
       )}
{otherStudiosAvailable&& otherStudiosAvailable.length && ( //otherStudiosAvailable is an [] and always truthy
       <Button
          variant="success"
          className="btn-xlarge"
          onClick={e => callBtnClick("flag")}
        >
          Other studios available
        </Button>)}

在您的代码中，otherStudiosAvailable 位于三元运算符的 else 部分，因此即使它有值，如果 defaultStudioAvailable 为真，它也不会运行