Redux 状态已更新，但组件状态未更新

Question

我的 Redux 状态是怎么更新的，可以在 pokelist.js 文件中注销， 但是我的状态变量设置不正确，cardList还是一个空数组，我该怎么办 正确设置状态？我注销 pokelist.js 文件中的集合，该文件注销 首先是一个空数组，然后是一个包含元素的数组。

// reducer.js file
import { GET_LIMIT_NAMES } from '../actions/PokedexActions';

const initialState = {
    collection: []
};

export default (state = initialState, action) => {
    switch (action.type) {
        case GET_LIMIT_NAMES:
            return {
                collection: action.data
            };
        default:
            return state;
    }
};
//===================================================================================================
// action.js file
import Pokemon from '../Pokemon';

export const GET_LIMIT_NAMES = "GET_LIMIT_NAMES";

export const getLimitNames = (limit = 100) => {
    // redux-thunk
    return async dispatch => {
        try {
            const allResponse = await fetch(`https://pokeapi.co/api/v2/pokemon/?limit=${limit}`);
            const allUrlsData = await allResponse.json();
            // console.log(allUrlsData.results);

            const collection = [];

            Promise.all(allUrlsData.results.map(urlData => {
                var pokemon;
                fetch(urlData.url).then(resp =>
                    resp.json()
                ).then(data => {
                    // console.log(data);
                    pokemon = new Pokemon(data);
                    // pokemon.log();
                    collection.push(pokemon)
                }).catch(err => {
                    console.log(err);
                })
                return collection;
            }))

            // console.log(collection)

            dispatch({
                type: GET_LIMIT_NAMES,
                data: collection
            });

        } catch (err) {
            console.log(err);
        }
    };
};
//===================================================================================================
// I want to make a list of cards from the Redux state
// pokelist.js
import React, { useState, useEffect } from 'react';
import Card from 'react-bootstrap/Card';
import ListGroup from 'react-bootstrap/ListGroup';
import { useSelector } from 'react-redux';

const PokeList = () => {
    const [cardList, setCardList] = useState();
    const collection = useSelector(state => state.pokedex.collection);

    useEffect(() => {
        console.log(collection)
        setCardList(collection.map(pokeData => 
            <Card key={pokeData.id} style={{ width: '18rem' }}>
                <Card.Img variant="top" src={pokeData.sprite + '/100px180'} />
                <Card.Body>
                    <Card.Title>{pokeData.Name}</Card.Title>
                    <ListGroup className="list-group-flush">
                        <ListGroup.Item>{'Height: ' + pokeData.height}</ListGroup.Item>
                        <ListGroup.Item>{'Weight: ' + pokeData.weight}</ListGroup.Item>
                    </ListGroup>
                </Card.Body>
            </Card>))
    }, [collection])

    return (
        <div>
            {cardList}
        </div>
    )
}

export default PokeList;
//===================================================================================================
// search.js file where i render the component and call the dispatch function
import React, { useState, useEffect } from 'react';
import { Container, Row, Col, Image, Button } from 'react-bootstrap';
import { useDispatch } from 'react-redux';

import PokeList from './pokedex/PokeList';
import * as pokedexActions from './pokedex/actions/PokedexActions';

const Search = () => {
    const dispatch = useDispatch();

    useEffect(() => {
        dispatch(pokedexActions.getLimitNames(5))
    }, [dispatch])

    return (
        <div>
            <Container>
                <h2>Search</h2>
                <PokeList />
            </Container>
        </div>
    );
}

export default Search;

Answer 1

useState() 钩子只是一个函数调用。它返回值和函数对。 values 只是一个常量，它没有任何属性绑定。

// Think of this line
const [cardList, setCardList] = useState([]);

// As these two lines
const cardList = [];
const setCardList = someFunction;

当您调用setCardList 时，您的变量不会立即更改，它没有属性绑定。它只是告诉 react 在下一次渲染时返回新值。

看我的回答React Hooks state always one step behind。

在您的情况下，您可以简单地跳过 useState 钩子

const PokeList = () => {
    const collection = useSelector(state => state.pokedex.collection);
    const cardList = collection.map(
           pokeData => (
                <Card key={pokeData.id} style={{ width: '18rem' }}>
                    <Card.Img variant="top" src={pokeData.sprite + '/100px180'} />
                    <Card.Body>
                        <Card.Title>{pokeData.Name}</Card.Title>
                        <ListGroup className="list-group-flush">
                            <ListGroup.Item>{'Height: ' + pokeData.height}</ListGroup.Item>
                            <ListGroup.Item>{'Weight: ' + pokeData.weight}</ListGroup.Item>
                        </ListGroup>
                    </Card.Body>
                </Card>)   
  );
  return (
        <div>
            {cardList}
        </div>
    )
}