收到 API 呼叫响应后无法在 React 中设置状态

Question

所以，我正在用 React 构建一个多页面向导组件。
我正在使用功能组件。父组件保存状态。每个“步骤”（Step1、Step2 等）页面均由Parent 组件中的switch 语句调用。

我的问题是，在我的第 2 步页面中，我传入了项目的“数组”并从 API 调用接收到“数组”响应，但它无法使用该响应设置状态，因为我打算。

这是父组件的状态：

  const [colorLinks, setColorLinks] = useState({
      red: [],
      blue: [],
      green: [],
      cyan: [],
      black: [],
      white: [],
      purple: [],
      gold: [],
      lightgreen: [],
      magenta: [],
      orange: [],
      gray: [],
      sepia: [],
      copper: [],
      pink: [],
      brown: [],
      beige: [],
  })

这是在 Parent 组件中编写的异步请求的代码，这些代码作为 props 传递给 Step2：

const functionWithPromise = item => { //a function that returns a promise
  return Promise.resolve('ok')
}

const anAsyncFunction = async (item, setColorLinks) => {
        let post = {
          "request": {
            "url": "http://colorendpoints.com/",
            "color": item
          }
        }
        let endpointurl = `http://localhost:8021/&url=http://colorendpoints.com/`;
        let result;
    
        try {
          result = await fetch(endpointurl, {
            method: "POST",
            body: JSON.stringify(post),
            headers: {
              Accept: "application/json",
              "Content-Type": "application/x-www-form-urlencoded"
            }
          })
          console.log('Successfully completed post request!')
          result = await result.json()
          result = result.items[0] // because it arrives as an array with items I need in 0th position
          setColorLinks({
                  red: result.red,
                  blue: result.blue,
                  green: result.green,
                  cyan: result.cyan,
                  black: result.black,
                  white: result.white,
                  purple: result.purple,
                  gold: result.gold,
                  lightgreen: result.lightgreen,
                  magenta: result.magenta,
                  orange: result.orange,
                  gray: result.gray,
                  sepia: result.sepia,
                  copper: result.copper,
                  pink: result.pink,
                  brown: result.brown,
                  beige: result.beige,
          })
          return functionWithPromise(result)
        } catch (e) {
          console.log('Got an error...e')
          console.log()
          return functionWithPromise(e)    
        }
}

const getData = async () => {
  return Promise.all(list.map(item => anAsyncFunction(item)))
}

仍然在 Parent 组件中，然后我将上面的 (getData、colorLinks 和 setColorLinks) 传递到 Step2，如下所示：

<Step2 
    getData={getData}
    colorLinks={colorLinks}
    setColorLinks={setColorLinks}
/>

我的列表：['color1', 'color2', 'color1', ...]

尽管执行了上述操作，但我无法colorLinks 更新传入的响应。我可以清楚地看到控制台中的成功响应，但 setColorLinks 被 完全忽略 。我肯定会通过调用 getData 得到结果数组，但即使使用 for 循环，它也认为结果未定义。我该如何解决这个问题并使用 API 调用的结果更新状态？为什么 setColorLinks 不更新我的异步地图函数中的状态？

Answer 1

你的问题来自这个函数

const getData = async () => {
  return Promise.all(list.map(item => anAsyncFunction(item)))
}

您正在地图中使用setColorLink，意味着您多次调用setColorLink。但是，setState 是一个异步请求 - 您最终会用新的 setState 覆盖每个状态。

我不确定 list 是什么，这个 .map 是干什么用的。如果您需要遍历项目数组并获取它们。你应该这样做。

const getData = async () => {
  const result = await Promise.all(list.map(item => anAsyncFunction(item)))
  setColorLink(result) //<- set state here, not inside Promise.all
}

您的列表是一个颜色数组，但 colorLink 只是一个颜色对象。 colorLink 是一个颜色对象数组吗？

收到 API 呼叫响应后无法在 React 中设置状态

Unable to set state in React after receiving API call response

javascript

asynchronous

promise

async-await

reactjs