+-
我试图从localStorage中获取项目并将其传递给useReducer状态。
当我从一个按钮切换到另一个按钮状态不更新。我的 initialState 确实更新了，但 states 不更新
我的 initialStates 和 states 在console.log上，这两个值都不同。states 始终存储所选按钮Genid项的前值和 initialStates 存储选择按钮Genid项的当前选择值，但主要问题是没有更新到useReducer状态部分。
const Played = ( {Genid} ) => {
console.log("Played page ")
console.log("*************************************************")
console.log(Genid)
console.log(JSON.parse(localStorage.getItem(Genid)))
const initialState = {
DATA: JSON.parse(localStorage.getItem(Genid)) || [],
isFetching: localStorage.getItem(Genid) ? true : false,
hasError: false,
}
console.log(initialState);
const [states, dispatch] = useReducer(reducer, initialState)
console.log(states)
1
投票
投票
所以你的代码中的问题很简单，初始状态在reducer中没有被填充，因为最初的displayid是未定义的，然后设置为 ditto
之所以有这种行为，是因为在 Veritcal 组成部分，你 setDisplayId 而该效果在初始渲染后运行，此时未定义的displayId已经被该函数使用。Horizontal 组成部分
现在，你的代码也有其他问题。你在更新sessionStorage时使用了 response.data.payload 但没有钥匙 payload 在 response.data
另外 Movement 组件是映射在 state.data 但那是一个对象。相反，你需要在 state.data.abilities
修改了以下代码片段
移动.js
const Movement = ({ states }) => {
console.log(states);
return (
<div>
{states.data &&
states.data.abilities.map(ability => <div>{ability.ability.name}</div>)}
</div>
);
};
export default Movement;
横向.js
console.log(displayid);
const initialState = {
// data: displayid? JSON.parse(sessionStorage.getItem(displayid)): [],
// isFetching: displayid && sessionStorage.getItem(displayid) ? true : false,
// hasError: false
};
const [states, dispatch] = useReducer(reducer, initialState);
// console.log(states);
useEffect(() => {
if (displayid && !sessionStorage.getItem(displayid)) {
console.log(displayid);
axios
.get(`https://pokeapi.co/api/v2/pokemon/${displayid}/`)
.then(response => {
console.log(response);
console.log(response.data);
dispatch({
type: "First",
payload: response.data
});
console.log(response.data);
sessionStorage.setItem(displayid, JSON.stringify(response.data));
})
.catch(error => {
console.log(error);
dispatch({
type: "Second"
});
});
} else if (displayid && sessionStorage.getItem(displayid)) {
// populate data from localStorage
const localData = {
data: JSON.parse(sessionStorage.getItem(displayid)) || [],
isFetching: sessionStorage.getItem(displayid) ? true : false,
hasError: false
};
dispatch({ type: "POPULATE", payload: localData });
}
}, [displayid]);
工作演示
