我正在学习React和Redux，并创建了一个Pokemon生成器应用程序来学习。我目前正在尝试为现有的口袋妖怪做一个更新表单;然而，它使我意识到我对这些组件工作方式有一个误解。
我有一个PokemonDetailContainer

import { connect } from 'react-redux'
import { requestSinglePokemon } from '../../actions/pokemon_actions'
import { pokemonDetail } from './pokemon_detail'

const mapDispatchToProps = dispatch => ({
    requestSinglePokemon: (pokemonId) => dispatch(requestSinglePokemon(pokemonId))
})

const mapStateToProps = (state) => ({
    state: state,
    loading: state.ui.loading
})

export default connect(
    mapStateToProps,
    mapDispatchToProps
)(pokemonDetail)

连接到PokemonDetail组件的

import React, { useEffect, useState } from "react";
import { Route, Routes } from "react-router-dom";
import { useParams } from "react-router-dom";
import { selectPokemonMoveNames } from "../../reducers/selectors";
import ItemDetailContainer from '../items/item_detail_container'
import { Item } from "../items/item";
import LoadingIcon from "./loading_icon";

export function pokemonDetail (props) {
    const { pokemonId } = useParams({pokemonId})
    const items = Object.values(props.state.entities.items)
    const moves = selectPokemonMoveNames(props.state)
    const thisPokemon = props.state.entities.pokemon[pokemonId]
    const [state, setState] = useState()
    

    useEffect(() => {
        const pokemon = props.requestSinglePokemon(pokemonId);
    }, [])

    if (thisPokemon && !props.loading.detailLoading) {
        return(
            <section className="pokemon-detail">
                <Routes>
                    <Route path="/items/:itemId" element={< ItemDetailContainer />}></Route>
                </Routes>
                <ul>
                    <figure>
                        <img src={thisPokemon.imageUrl} alt={thisPokemon.name} />
                    </figure>
                    <li><h2>{thisPokemon.name}</h2></li>
                    <li>Type: {thisPokemon.pokeType}</li>
                    <li>Attack: {thisPokemon.attack}</li>
                    <li>Defense: {thisPokemon.defense}</li>
                    <li>Moves: {moves.join(', ')}</li>
                </ul>
                <section className="toys">
                    <h3>Items</h3>
                    <ul className="toy-list">  
                        {items.map(item => <Item key={item.name} itemProps={item}/>)}
                    </ul>
                </section>
            </section>
        )
    } else {
        return (
            <LoadingIcon />
        )
    }

}

现在，我认为useEffect将允许我分派我的动作-在本例中，从以下动作加载单个口袋妖怪的请求-并通过useState将其分配给状态，但如果我尝试这样做，它会给我一个无限循环（如果在useEffect内完成）或返回空。

export const receiveOnePokemon = payload => ({
    type: RECEIVE_ONE_POKEMON,
    payload
})
...
export const requestSinglePokemon = (id) => (dispatch) => {
    APIUtil.fetchPokemon(id).then(
        (payload) => (dispatch(receiveOnePokemon(payload)))
    )
}

因此，虽然一切都正常，但当进入口袋妖怪详细信息页面时，整个状态正在重新加载，同时加载了一个口袋妖怪，我不确定如何将单个口袋妖怪信息作为 prop 传递（即，没有整个状态），因为ownProps似乎不再工作。正因为如此，我不知道如何创建一个表单来更新一个口袋妖怪。如果有人能帮助我理解useEffect和mapStateToProps在此上下文中的含义，那将有很大帮助！我一直觉得很迷茫