点击更改时做出反应 分页数据落后一步

Question

编写一个简单的前端分页，带有下一个和一个后退按钮。当我控制台时.log(状态(可能状态似乎在根据我的计划在单击按钮时发生变化。但是，网页显示一页后的状态数据。

import React, { useEffect, useState } from "react";
import { useStateValue } from "../state";
import getChar from "../api/index";
import Spinner from "../components/loading"
export default function Characters(props) {
// access state and dispatch functions here
const [state, dispatch] = useStateValue();
const [loading, setLoading] = useState(true);
const [index, setIndex] = useState(0);
let [page, setPage] = useState(1);

const apiCall = async (num) => {
const first = (4 * num) - 4;
const last = (4 * num) - 1;
const res = await getChar.getCharacters();
const display = res.results.filter((char, index) => {
return (index >= first && index <= last);
})
await dispatch({
type: 'GET_CHARACTERS',
data: display
});
setLoading(false)
setIndex(res.results.length)
}
// move to next page
const next = () => {
const newPage = page + 1;
const maxPages = Math.ceil(index / 4);
if (newPage > maxPages) {
setPage(maxPages)
apiCall(maxPages)
} else {
setPage(newPage)
apiCall(newPage)
}
}
// move back a page
const back = () => {
const newPage = page - 1;
if (newPage === 0) {
setPage(1)
apiCall(1)
} else {
setPage(newPage)
apiCall(newPage)
}
}
useEffect(() => {
apiCall(1)
}, []);
if (loading) {
return <div><Spinner /></div>
}
return (
<div>
<h1>Characters Page</h1>
{
state.characters.map((char, index)=> (
(char.starships.length === 0) ?
<div className="List" key={index}>
<h3 className="character">
{char.name}
</h3>
</div>
:
<div className="List" key={index}>
<h3 className="character">
{char.name} - pilot
</h3>
</div>
))
}
<button onClick={back}>back</button>
<button onClick={next}>next</button>
</div>
);
}

export default function reducer(state, action) { 
switch (action.type) { 
case "GET_CHARACTERS": 
state.characters = action.data;
return state; default: return state; 
} 
}

显示单击之前的状态数据，直到分页的最后一页。不会显示最后一位分页数据，直到单击后退按钮 viceversa 以获取第一位数据。

Answer 1

反应无法检测到可变对象中的更改。每个化简器中都应返回一个新的状态对象。

case "GET_CHARACTERS": 
state.characters = action.data;
return {...state};

或

case "GET_CHARACTERS": 
return {...state, characters: action.data};

一些有用的信息：

• 这是反应文档中关于状态和setState的说明。 正确使用状态
• 这在 react 的使用状态的介绍中提到过，反应如何比较前后两种状态。纾困状态更新
• 这就是 redux 引入化简器时提到的内容。我们不会改变状态。

这是可变对象的演示。

var a= {name:1}
var b = a;
b.name=2
var result = Object.is(a,b)
console.log(result) // true