Reactjs 在保持原始状态的同时向状态添加更多数据（React）

我有一个应用程序，可以从API获取数据作为页面。我添加了获取下一页数据并将其设置为状态的功能

我希望能够获取下一页数据，但不是替换状态，而是希望添加下一页值

这是密码

const TopRatedPage = () => {
  const [apiData, setApiData] = useState([]);
  const [isLoading, setLoading] = useState(false);
  const [pageNumber, setPageNumber] = useState(1);
  const { results = [] } = apiData;

  useEffect(() => {
    setLoading(true);
    fetchTopRatedMovies(pageNumber).then((data) => setApiData(data));
    setLoading(false);
  }, [apiData, pageNumber]);

  return (
    <div className='top-rated-page-wrapper'>
      <h1>TopRatedPage</h1>
      {isLoading ? <h1>Loading...</h1> : <MovieList results={results} />}
      <button
        onClick={() => {
          setPageNumber(pageNumber + 1);
        }}>
        MORE
      </button>
    </div>
  );

const TopRatedPage=（）=>{
const[apiData，setApiData]=useState（[]）；
const[isLoading，setLoading]=useState（false）；
常量[pageNumber，setPageNumber]=使用状态（1）；
常量{results=[]}=apiData；
useffect（（）=>{
设置加载（真）；
fetchTopRatedMovies（页码）。然后（（数据）=>setApiData（数据））；
设置加载（假）；
}，[apiData，页码]；
返回(
上档页面
{正在加载？正在加载…：}
{
设置页码（页码+1）；
}}>
更多
);

我尝试过

setApiData（…apiData，data）

但它给出了错误，apiData不可编辑

下面是返回的数据

Object{page:1，total_results:5175，total_pages:259，results:（20）[…]）

---

为了澄清，我希望能够允许用户单击按钮，将更多API数据添加到状态并显示更多数据。

更新以反映API调用返回的对象的形状

如下所示，处理此问题的一种方法是将组件状态下的页面元数据（

page

，

total\u results

，

total\u pages

）替换为来自最新api调用的信息，但每次都附加

结果

如果你不关心分页信息，你可以把它放在地板上，只存储结果，但保留它可以让你显示分页信息，并在结束时禁用“加载更多”按钮

显示当前页面和总页面可能没有意义，因为您只是将其添加到列表中（因此在UI意义上并不是真正的“分页”），但我将其包含在这里只是为了让您了解如果您选择这样做，您可以如何使用该信息

以下片段中与原始问题相关的关键内容是状态合并：

const more=（）=>{
fetchTopRatedMovies（第+1页）
。然后（newData=>{
设置数据({
//复制所有内容（页面、总结果、总页面等）
//从获取的数据进入更新状态
…新数据，
//将新结果附加到旧结果
结果：[…data.results，…newData.results]
});
});
}

我使用将所有字段从
newData
复制到新状态，然后分别处理
results
字段，因为我们希望用串联的结果替换它。（如果您将
results:[…data.results，…newData.results]
行保留，您的新状态将具有
newData
中的results字段。通过在
…newData
之后指定
results
字段，您将用串联数组替换它

希望这有帮助


/*
api返回具有以下形状的对象。
我不知道每个结果条目是什么样子，
但就我们的目的而言，这并不重要，也应该如此
您可以根据需要直接调整以下代码。
{
页码：1，
总结果：5175，
总页数：259页，
结果:[
{
标题：《斯科特·朝圣者与世界》，
年份：2010年，
导演：《埃德加·赖特》
},
{
标题：《蜘蛛侠：蜘蛛诗》，
年份：2018年，
导演：[鲍勃·佩西切蒂”，“彼得·拉姆齐”，“罗德尼·罗斯曼]]
},
{
标题：“小丑”，
年份：2019年，
导演：《托德·菲利普斯》
},
];
}
*/
const{useState}=React；
//模拟api请求；等待半秒并使用模拟数据解析
const fetchTopRatedMovies=（page=0）=>新承诺（（解析）=>{
//5是任意的
常数numPerPage=5；
//生成包含标题和年份的模拟结果数组
const results=Array.from(
{length:numPerPage}，
（u，i）=>({
标题：`Movie${（第1页）*numPerPage+i}`，
年份：Math.floor（Math.random（）*20）+2000
})
);
//16是任意的；只是为了说明如何禁用
//进入最后一页时，单击“更多”按钮
const total_results=16；
//返回有效载荷
常数数据={
页
总结果，
总页数：数学楼层（总结果/页数），
结果
}
setTimeout（（）=>解析（数据），500）；
});
常量演示=（）=>{
const[data，setData]=useState（{page:0，results:[]}）；
常数更多=（）=>{
fetchTopRatedMovies（第+1页）
。然后（newData=>{
设置数据({
//复制所有内容（页面、总结果、总页面等）
//从获取的数据进入更新状态
…新数据，
//将新结果附加到旧结果
结果：[…data.results，…newData.results]
});
});
}
//从状态中提取单个字段
const{page，results，total_results，total_pages}=数据；
//还有更多的页面吗？（用于在我们到达末尾时禁用按钮）
const hasMore=page==0 | |（第页<总页数）；
返回(
{总页数&&(
页码：{Page}共{页}
总计：{Total_results}
)}  
更多

{results.map（m=>(
{m.title}-（{m.year}）
))}

组件状态：

如果有帮助的话，我已经添加了更多的代码。我不确定这是否是因为它们都不同？请稍候。更新。我尝试使用您的示例用我自己的useEffect（）实现它，并且不断获取数据是不合适的！setMovies（[…movies，…moreMovies]）我再问一遍，因为这是关键：api调用返回什么？数据返回什么<