在循环中声明的React js函数包含对变量“allowed”的不安全引用

Question

收到此警告但代码正常工作循环中声明的函数包含对变量“allowed”的不安全引用如果我为allowed创建挂钩状态，则没有警告但代码不工作。如何在不使用useState的情况下声明变量。代码见附件。

const checkAllowed = async () => {
    let allowed = 1;
    await axios
      .get("http://localhost:4000/api/courses/eachstage/" + props.data.CourseID)
      .then(async (res) => {
        for (let i = 0; i < res.data.length; i++) {
          await axios
            .get("http://localhost:4000/api/courses/allow/" + res.data[i].StID)
            .then(async (response) => {
              if (response.data === 0) {
                allowed = 0;
              }
            });
        }
      });
    return allowed;
  };

Answer 1

我不确定你是否需要返回，但试试这个，稍微整洁一点，范围工作得更好

const checkAllowed = async () => {
    const { data } = await axios.get(`http://localhost:4000/api/courses/eachstage/${props.data.CourseID}`)
    const arrAllow = await Promise.all(data.map(async ({ StID }) => {
      return await axios.get(`http://localhost:4000/api/courses/allow/${StID}`)
    }))

    const allowFind = arrAllow.find((data) => data === 0)

    return !Boolean(allowFind) ? 1 : 0
  }

Answer 2

出现此警告是因为您在for循环之外声明allowed，然后在for循环中定义的函数内修改它）。这是不鼓励的，因为它的行为可能不像您期望的那样。

1. 您可以在循环外部声明异步响应处理程序，并将其作为参数传入，而不是内联声明
2. 您可以在结果上使用reduce，而不是for循环

您可能还希望不要在循环中等待，而是返回一个等待promise的promise数组。全部。这将允许您并行处理更多请求

更多详情请参见此处：https://eslint.org/docs/rules/no-loop-func