收到API调用响应后，无法在React中设置状态

Question

因此，我正在react中构建一个多页向导组件
我使用的是功能组件。父组件保持状态。每个"；步骤"；(Step1、Step2等(页面由Parent组件中的switch语句调用。

我的问题是，在我的Step2页面中；阵列"；并接收一个"；阵列"；API调用的响应，但它未能按我的意图设置该响应的状态。

这是父组件的状态：

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

以下是在Parent组件中编写的异步请求代码，这些请求作为道具传递给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是指一组颜色对象吗？