英文:
using axios with reducer / context / provider
问题
I'm using useEffect to make an api call to set initialState, then pass it to "todo" with useReducer
code here:
export function TodoProvider({children}){
const apiUrl = "http://localhost:3001/home";
const [initialState,setInitialState] = useState([]);
useEffect(()=>{
axios.get(apiUrl)
.then((response)=>{
setInitialState(response.data.data);
})
.catch(e=>console.log(e))
},[]);
console.log(initialState);
const [todo, dispatch] = useReducer(todoReducer, initialState);
return (
<TodoContext.Provider value={todo}>
<TodoDispatchContext.Provider value={dispatch}>
{children}
</TodoDispatchContext.Provider>
</TodoContext.Provider>
)
}
but todo isn't getting the value of initialState, does anyone know what am i doing wrong here?
is it because useReducer() only gets the first time value from initialState? is there a different way to do it?
and in the inspector in chrome
that one console.log(initialState) prints these:
thank you in advance
英文:
I'm using useEffect to make an api call to set initialState, then pass it to "todo" with useReducer
code here:
export function TodoProvider({children}){const apiUrl = "http://localhost:3001/home";const [initialState,setInitialState] = useState([]);useEffect(()=>{axios.get(apiUrl).then((response)=>{setInitialState(response.data.data);}).catch(e=>console.log(e))},[]);console.log(initialState);const [todo, dispatch] = useReducer(todoReducer, initialState);return (<TodoContext.Provider value={todo}><TodoDispatchContext.Provider value={dispatch}>{children}</TodoDispatchContext.Provider></TodoContext.Provider>)}
but todo isn't getting the value of initialState, does anyone know what am i doing wrong here?
is it because useReducer() only gets the first time value from initialState? is there a different way to do it?
and in the inspector in chrome
that one console.log(initialState) prints these:
thank you in advance
答案1
得分: 1
问题似乎是由于传递给useReducer的initialState保持为空数组而引起的。
您可以更新状态和reducer声明如下：
const [initialState, setInitialState] = useState(null);const [todo, dispatch] = useReducer(todoReducer, initialState || []);
并且有条件地进行渲染，如下所示：
if (initialState === null) {return <div>Loading...</div>;}return (<TodoContext.Provider value={todo}><TodoDispatchContext.Provider value={dispatch}>{children}</TodoDispatchContext.Provider></TodoContext.Provider>);
完整代码如下：
export function TodoProvider({ children }) {const apiUrl = "http://localhost:3001/home";const [initialState, setInitialState] = useState(null);useEffect(() => {axios.get(apiUrl).then((response) => {setInitialState(response.data.data);}).catch((error) => {console.log(error);});}, []);const [todo, dispatch] = useReducer(todoReducer, initialState || []);if (initialState === null) {return <div>Loading...</div>;}return (<TodoContext.Provider value={todo}><TodoDispatchContext.Provider value={dispatch}>{children}</TodoDispatchContext.Provider></TodoContext.Provider>);}
英文:
The issue seem to be caused due to the initialState passed to useReducer staying as an empty array.
You can update the state and reducer declaration as:
const [initialState, setInitialState] = useState(null);const [todo, dispatch] = useReducer(todoReducer, initialState || []);
and conditionally render, as:
if (initialState === null) {return <div>Loading...</div>;}return (<TodoContext.Provider value={todo}><TodoDispatchContext.Provider value={dispatch}>{children}</TodoDispatchContext.Provider></TodoContext.Provider>);
Full code:
export function TodoProvider({ children }) {const apiUrl = "http://localhost:3001/home";const [initialState, setInitialState] = useState(null);useEffect(() => {axios.get(apiUrl).then((response) => {setInitialState(response.data.data);}).catch((error) => {console.log(error);});}, []);const [todo, dispatch] = useReducer(todoReducer, initialState || []);if (initialState === null) {return <div>Loading...</div>;}return (<TodoContext.Provider value={todo}><TodoDispatchContext.Provider value={dispatch}>{children}</TodoDispatchContext.Provider></TodoContext.Provider>);}
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论