React - 使用 usestate 钩子推送数组

Question

我正在制作“加载更多”，每次单击按钮时都会从后端获取 10 个项目。

我不明白我正面临这个基本但奇怪的问题。

问题（示例）

const [ projectArray, setProjectArray ] = useState([ { id: 1 } ]) // original state
//
const { data } = await axios.get(`/api/project/explore/${page}`);
console.log(data); // returns array of objects 
if (data.length > 0) {
   setProjectArray(array => [...array, data]);
}
console.log(projectArray) 
// This^^ returns >>> [ {id: 1}, [ { id: 2 }, { id: 3 }] ]

Answer 1

数据也是一个数组，所以你也应该扩展它

   setProjectArray(array => [...array, ...data]);

Answer 2

在这种情况下， data已经是一个数组，所以它按预期工作。 在现有数组中添加一个数组。

您可能希望使用concat()将两个数组连接在一起。

试试setProject(concat(projectArray,data));