使用 useContext 反应打字稿映射不起作用

Question

我尝试使用 react 打字稿和 useContext 从 tvmaze api 获取一些数据，我可以显示数据，但 useContext 不会随着返回而更新，所以当我使用 map 函数时，没有任何显示任何建议？

import React , { Fragment, useEffect, useContext, useState } from 'react'
import axios from 'axios'
import Store from '../Store/Store'
import "core-js/stable";
import "regenerator-runtime/runtime";
export default function App() {
const {state, dispatch} = useContext(Store)
useEffect(() => {
state.episodes.length === 0 && fetchDataAction()
})
const fetchDataAction = async () => {
const URL = 'http://api.tvmaze.com/singlesearch/shows?q=rick-&-morty&embed=episodes'
const data = await fetch(URL);
const dataJSON = await data.json();
console.log(dataJSON._embedded.episodes);
return dispatch({
type: "FETCH-DATA",
payload: dataJSON._embedded.episodes,
})
}
return (
<Fragment>
{console.log(state)}
<h1>Rick and Morty</h1>
<p>Pick your favorite episode!!!</p>
<section>
{state.episodes.map((episode: any) => {
return (
<section key={episode.id}>
<img src={episode.image.medium} alt={`Rick and Morty ${episode.name}`} />
<section>
Season: {episode.season} Number: {episode.number}
</section>
</section>
)
})}
</section>
</Fragment>
)
}

我没有使用 Redux，但我使用的是 babel + webpack，我对这一切真的很陌生，所以我在这里有点迷失我的 Store.tsx 文件，

import React from 'react'
interface IState {
episodes: [],
favorites: []
}
interface IAction {
type: string,
payload: any
}
const initialState:IState = {
episodes: [],
favorites: []
};

const Store = React.createContext<IState | any>(initialState)
function reducer(state: IState, action: IAction): IState {
switch (action.type) {
case 'FETCH_DATA':
return { ...state, episodes: action.payload}
default:
return state
}
}
export function StoreProvider(props: any): JSX.Element {
const [state, dispatch] = React.useReducer(reducer, initialState)
return <Store.Provider value={{state, dispatch}}>{props.children}</Store.Provider>
};
export default Store;

Answer 1

你有一个错别字。 您正在调度类型："FETCH-DATA"，并且您的 swich 语句正在检查大小写"FETCH_DATA"。

为了避免将来出现此问题，通常的做法是创建一个单独的文件，您将在其中声明操作，在您的情况下为"FETCH_CASE"。 你可以从字面上做const FETCH_ACTIONS = "FETCH_ACTIONS"

然后在化简器和调度器所在的文件中，您将导入操作以确保它们引用相同的内容。

1. redux 和 webpack/babel 不用于相同的目的 - redux 用于存储管理，类似于 useContext。 webpack 和 babel 或多或少地编译你的代码。

2. 如果您不使用它，则无需导入 axios，您使用 fetch API 的目的与使用 Axios 的目的相同。

在

3. useEffect 中调用它之前，您必须声明 fetchDataAction。 换句话说，useEffect 应该在函数下方。