Javascript 在React中设置状态的多个提取请求

我想映射一个数组以发出多个提取请求，并根据这些提取请求的结果更新状态

我可以通过Promise.all（）实现这一点，但这意味着我必须等待所有的获取请求得到解决——我希望在“as and when”的基础上更新状态，以便更快地更新UI

这是一些伪代码来解释我要做的事情：

const[masterState，setMasterState]=useState（null）；
useffect（（）=>{
常量fetchData=async（名称）=>{
const initialData=等待获取(`http://example.com/api/${name}`）；
const jsonResponse=await initialData.json（）
setMasterState（jsonResponse）
};
[“Bill”、“Bob”、“Brian”].map（name=>fetchData（name））；
}，[ThingTatchanged]）；

---

有人有什么建议吗？这可能吗？

可能。您应该确保数据在

useffect

中正确合并：

//将数据初始化为空数组
const[masterState，setMasterState]=useState（[]）；
useffect（（）=>{
常量fetchData=async（名称）=>{
const initialData=等待获取(`http://example.com/api/${name}`）；
const jsonResponse=await initialData.json（）
//要避免同步问题，请使用状态的上一个值，
//而不是从masterState获取它（它没有被更新）。
//使用spread运算符将新值干净地合并到数组中
setMasterState（previousState=>[…previousState，jsonResponse]）
};
//forEach更合适，因为您没有创建新数组。
//您只是在为每个元素执行一些操作
[“比尔”、“鲍勃”、“布赖恩”].forEach（name=>fetchData（name））；
}，[ThingTatchanged]）；

您可以使用

for

循环遍历数组并调用fetch方法

这样，代码将按顺序执行，这意味着它将等待第一个承诺实现，然后调用第二个承诺

您可以在

setState

方法中使用回调

const [masterState, setMasterState] = useState(null);

useEffect(() => {
  const fetchData = async (name) => {
    const initialData = await fetch(`http://example.com/api/${name}`);
    const jsonResponse = await initialData.json()
    setMasterState( prevState => [...masterState, ...jsonResponse]);
  };
  let inputArray = ["Bill", "Bob", "Brian"];
  (async function() {
    for(const item of inputArray) {
        fetchData(name)
      }
  })();


}, [thingThatChanged]);