javascript - 在 React 中设置状态的多个 Fe​​tch 请求

Question

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

我可以使用 Promise.all() 实现这一点，但这意味着我必须等待所有获取请求得到解决 - 我想“按时”更新状态，以便 UI 可以更新更快。

这是一些伪代码来解释我正在尝试做的事情:

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(jsonResponse)
  };

  ["Bill", "Bob", "Brian"].map(name => fetchData(name));

}, [thingThatChanged]);

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

Answer 1

有可能。您应该确保数据在 useEffect 中正确合并:

// Init the data as an empty array
const [masterState, setMasterState] = useState([]);

useEffect(() => {
  const fetchData = async (name) => {
    const initialData = await fetch(`http://example.com/api/${name}`);
    const jsonResponse = await initialData.json()
    // To avoid sync problems, use the previous value of the state, 
    // instead of getting it from masterState (its not garantized to be updated). 
    // Use spread operator to merge the new value in the array cleanly
    setMasterState(previousState => [...previousState, jsonResponse])
  };
  // forEach is more appropiate since you are not creating a new array. 
  // You are just executing something for each element
  ["Bill", "Bob", "Brian"].forEach(name => fetchData(name));

}, [thingThatChanged]);