React项目中sessionStorage setItem无法存储更新后对象求助

问题根源 #

你的代码存在两个关键问题：

1. getSrc函数中，datas.map的回调没有return axios请求的Promise，导致axios.all实际等待的是一堆undefined，而非真正的异步请求。这会让getSrc().then(...)提前执行，此时所有获取图片URL的异步请求还未完成，data对象上还没添加url属性。
2. 你看到console.log(data)显示有url，是因为浏览器控制台的对象是实时引用——当后续异步请求完成修改data后，控制台会更新显示，但JSON.stringify是在then执行时立刻序列化的，那时url还未被添加。

修复代码 #

先修正getSrc，确保返回完整的Promise数组，同时遵循React数据不可变性原则，避免直接修改原对象：

const [items, setItems] = useState([]);

const getSrc = (datas) => {
  return axios.all(
    datas.map((data) => {
      // 必须return这个axios请求，让axios.all等待它完成
      return axios
        .get(`https://database/${data.imageID}`)
        .then((res) => {
          if (res.status !== 200 || !res.data) {
            throw res;
          }
          const src = `data:image/jpeg;base64,${res.data}`;
          // 返回新对象，不修改原数据
          return { ...data, url: src };
        })
        .catch((err) => {
          console.log(err);
          // 出错时返回原对象，避免数组元素缺失
          return data;
        });
    })
  );
};

useEffect(() => {
  axios
    .get("https://server/getPage")
    .then((res) => {
      if (res.status !== 200 || !res.data) {
        throw res;
      }
      return getSrc(res.data);
    })
    .then((updatedData) => {
      setItems(updatedData);
      sessionStorage.setItem("items", JSON.stringify(updatedData));
      console.log(updatedData);
      console.log(JSON.parse(sessionStorage.getItem("items")));
    })
    .catch((err) => {
      console.log(err);
    });
}, []);

核心修复点 #

• 保证Promise链完整：map回调必须return axios请求，让axios.all能正确等待所有异步操作完成。
• 数据不可变性：通过展开运算符{...data, url: src}创建新对象，避免直接修改原数组中的对象，减少潜在的引用问题。
• 异步顺序控制：确保在所有图片URL请求完成后，再执行setItems和sessionStorage存储操作。

内容的提问来源于stack exchange，提问作者zzen