我无法让 reducer 与 React 上下文一起工作。在 buttonbar.js
中,有两个按钮应该更新状态。状态将通过过滤当前的数据来更新。正在单击按钮,我没有收到任何错误,但它也没有做任何事情。我认为问题出在 reducer 上。
context.js
import React, { useState, useEffect } from "react";
import * as moment from "moment";
import axios from "axios";
export const Context = React.createContext();
const url = "https://projects.fivethirtyeight.com/polls/polls.json";
export const filterReducer = (state, action) => {
switch (action.type) {
case "SHOW_ALL":
return state.polls;
case "SHOW_APPROVAL":
return state.polls.filter(e => e.type === "trump-approval");
default:
return state.polls;
}
};
export function Provider({ children }) {
let intialState = {
polls: [],
dispatch: action => this.setState(state => filterReducer(state, action))
};
const [state, setState, dispatch] = useState(intialState);
useEffect(() => {
var dateRange = moment()
.subtract(7, "days")
.calendar();
axios
.get(url)
.then(res => {
setState({
polls: res.data
.filter(e => Date.parse(e.endDate) >= Date.parse(dateRange))
.reverse()
});
}, [])
.catch(error => console.log(error));
}, []);
return (
<Context.Provider value={[state, setState, dispatch]}>
{children}
</Context.Provider>
);
}
// export const Consumer = Context.Consumer;
buttonbar.js
import React, { useContext, useState, useEffect, useReducer } from "react";
import { Context, filterReducer } from "../context";
const ButtonBar = () => {
const [state, setState] = useContext(Context);
const [filter, dispatch] = useReducer(filterReducer, state);
const showAll = () => {
dispatch({ type: "SHOW_ALL" });
console.log("showAll clicked");
};
const showApproval = () => {
dispatch({ type: "SHOW_APPROVAL" });
console.log("showApproval clicked");
};
return (
<div class="mb-2">
<button class="btn btn-primary btn-sm" name="all" onClick={showAll}>
All
</button>{" "}
<button
class="btn btn-primary btn-sm"
name="trump approval"
onClick={showApproval}
>
Trump Approval
</button>
</div>
);
};
export default ButtonBar;
最佳答案
有几件事,你做得不对。
首先,您将 initialState 与调度方法一起使用,而您试图使用不正确的第三个参数从 useState
获取此调度值
其次,既然你用的是reducer模式,最好用if useReducer
hook
第三,一定不要在reducer中对数据进行过滤,否则下次要显示所有数据时,会丢失完整的数据,只剩下过滤后的数据。相反,您必须为其设置选择器。
相关代码:
import React, {
useEffect,
useContext,
useReducer,
useMemo,
useState
} from "react";
import ReactDOM from "react-dom";
import "./styles.css";
import moment from "moment";
import axios from "axios";
export const Context = React.createContext();
const url = "https://projects.fivethirtyeight.com/polls/polls.json";
export const filterReducer = (state, action) => {
switch (action.type) {
case "ADD_POLLS":
console.log(action.payload);
return action.payload;
default:
return state.polls;
}
};
export function Provider({ children }) {
const [state, dispatch] = useReducer(filterReducer);
useEffect(() => {
var dateRange = moment()
.subtract(7, "days")
.calendar();
axios
.get(url)
.then(res => {
dispatch({
type: "ADD_POLLS",
payload: res.data
.filter(e => Date.parse(e.endDate) >= Date.parse(dateRange))
.reverse()
});
}, [])
.catch(error => console.log(error));
}, []);
return (
<Context.Provider value={[state, dispatch]}>{children}</Context.Provider>
);
}
const ButtonBar = () => {
const [polls] = useContext(Context);
const [state, setState] = useState(polls);
useEffect(() => {
setState(polls);
}, [polls]);
const filterResult = useMemo(() => {
return filter => {
switch (filter) {
case "SHOW_ALL":
setState(polls);
break;
case "SHOW_APPROVAL":
setState(polls.filter(e => e.type === "trump-approval"));
break;
default:
return;
}
};
}, [polls]);
return (
<div class="mb-2">
<button
class="btn btn-primary btn-sm"
name="all"
onClick={() => filterResult("SHOW_ALL")}
>
All
</button>{" "}
<button
class="btn btn-primary btn-sm"
name="trump approval"
onClick={() => filterResult("SHOW_APPROVAL")}
>
Trump Approval
</button>
<div>{(state || []).length}</div>
<pre>{JSON.stringify(state, null, 4)}</pre>
</div>
);
};
const rootElement = document.getElementById("root");
ReactDOM.render(
<Provider>
<ButtonBar />
</Provider>,
rootElement
);
关于javascript - React 上下文 useReducer 未正确更新,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/56532434/