React中如何将另一个useState切片转换后的数据存入新useState

你的问题出在直接修改了原数据对象的引用：虽然你用[...reponsefulldata]复制了数组，但数组里的每个tour对象还是原数据的引用，所以在map里修改tour.info时，会同时改变Fulltoursdata里的对应对象。

修复后的代码 #

const [Fulltoursdata, setFulltoursdata] = useState([]);
const [Trimmedtoursdata, setTrimmedtoursdata] = useState([]);    

useEffect(() => {
  Getfulldata();
}, []);

const Getfulldata = async () => {
  await fetch("https://course-api.com/react-tours-project")
    .then((response) => response.json())
    .then((reponsefulldata) => {
      // 浅拷贝数组，保存原始数据
      setFulltoursdata([...reponsefulldata]);
      settoursdata([...reponsefulldata]);
      setIsLoaded(true);
      return reponsefulldata;
    })
    .then((dataobject) => {
      // 遍历每个tour时，创建新对象，避免修改原引用
      const filteredTourinfo = dataobject.map((tour) => ({
        ...tour, // 复制原对象的所有属性
        info: tour.info.slice(0, 120) + "...." // 只修改新对象的info字段
      }));
      setTrimmedtoursdata(filteredTourinfo);
    });
};

关键改动说明 #

• 在map处理时，使用{...tour, info: ...}创建新的对象，而不是直接修改原tour对象。这样原数据（Fulltoursdata里的对象）不会被改动，Trimmedtoursdata里的是独立的新对象。
• 去掉了多余的Trimmedcopy变量，直接把filteredTourinfo传给setTrimmedtoursdata即可，因为map本身返回的就是新数组。

另外，建议统一变量命名风格（比如Fulltoursdata改成fullToursData，遵循小驼峰命名），代码可读性会更好。

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