用 useContext 反应打字稿地图不起作用

Question

我尝试使用 react typescript 和 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"

然后在你的 reducer 和 dispatcher 所在的文件中，你将导入 action 以确保它们引用相同的东西。

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

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

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