我的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;
答案 0 :(得分:0)
useState()
钩子只是一个函数调用。它返回值和函数对。 values
只是一个常数,没有任何属性绑定。
// Think of this line
const [cardList, setCardList] = useState([]);
// As these two lines
const cardList = [];
const setCardList = someFunction;
调用setCardList
时,变量不会立即更改,没有属性绑定。它只是告诉反应在下一次渲染时返回新值。
查看我的答案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>
)
}