[英]React Hooks useState Array empty with states rendered in the component
我有一種情況,我可以使用減速器成功調度我的狀態,並且我可以在我的組件中渲染它
這里是相關代碼
在我的action/index.js
export const receivedLeaguesList = json => ({
type: RECEIVE_LEAGUES_LIST,
json: json
});
export function fetchLeaguesList() {
return function(dispatch) {
dispatch(requestLeaguesList());
return axios
.get("https://www.api-football.com/demo/v2/leagues/")
.then(res => {
let leagues = res.data.api.leagues;
dispatch(receivedLeaguesList(leagues));
})
.catch(e => {
console.log(e);
});
}
}
我的reducers/index.js
import { REQUEST_LEAGUES_LIST, RECEIVE_LEAGUES_LIST } from "../actions";
const initialState = {
leaguesList: [],
isLeagueListLoading: false
};
const reducer = (state = initialState, action) => {
switch (action.type) {
case REQUEST_LEAGUES_LIST:
return { ...state, isLeagueListLoading: true };
case RECEIVE_LEAGUES_LIST:
return { ...state, leaguesList: action.json, isLeagueListLoading: false };
default:
return state;
}
};
在我的組件component/Leagues.js
let Leagues = ({ leaguesList, loading, getList }) => {
useEffect(() => {
getList();
}, [getList]);
const [itemsLeagues] = useState([leaguesList]);
console.log("league list", itemsLeagues);
const mapDispatchToProps = {
getList: fetchLeaguesList
};
我在這里復制了演示 => https://codesandbox.io/s/select-demo-71u7h ?
我可以在執行 map 的組件中渲染我的leaguesList
狀態,但是為什么
const [itemsLeagues] = useState([leaguesList]);
console.log("league list", itemsLeagues);
返回一個空數組?
您將 useState 的初始值設置錯誤:
const [itemsLeagues] = useState(leaguesList);
代替
const [itemsLeagues] = useState([leaguesList]);
useState 的返回值不是 value 本身,而是 value 和 mutator 的數組:
const [value, setValue] = useState([42, 43])
// here's value equals [42, 43]
所以如果你試圖解構你傳遞給 useState() 的包裝數組,你應該像這樣使用它(盡管你不需要它):
const [[itemsLeagues]] = useState([leaguesList]);
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.