前提・実現したいこと
Laravel + React(16.14.0)を使用しています。
axiosによるデータ取得後、リストとして表示する実装中に以下のエラーメッセージが発生しました。
発生している問題・エラーメッセージ
axiosで取得したデータをsetStateでstate更新した後、(おそらく)再レンダリングが起きていない。 その結果、画面にデータが表示されない。
該当のソースコード
親コンポーネント
react
import React, { useState, useEffect } from 'react'; import axios from 'axios'; import ReactDOM from 'react-dom'; import { Button, Container } from '@material-ui/core'; import AccountList from '../components/AccountList'; import CreateAccountForm from '../components/CreateAccountForm'; import Loading from './Loading' const Dashboard = () => { const [officialAccounts, setOfficialAccounts] = useState([]); const [loading, setLoading] = useState(true); useEffect(() => { getOfficialAccountsData(); }, []) const getOfficialAccountsData = () => { axios .get('/api/official_accounts') .then(response => { var newOfficialAccounts = [...response.data]; setOfficialAccounts(newOfficialAccounts); console.log(response.data); setLoading(false); }) .catch(() => { console.log('通信に失敗しました'); }); } if (loading) { return ( <Loading /> ); } return ( <Container> <div className="card"> <div className="card-header">公式アカウント管理</div> <div className="card-body"> <CreateAccountForm officialAccounts={officialAccounts} setOfficialAccounts={setOfficialAccounts} /> <AccountList officialAccounts={officialAccounts} /> </div> <Button color="secondary" variant="outlined">Logout</Button> </div> </Container> ); } export default Dashboard;
子コンポーネント
import React from 'react'; import ReactDOM from 'react-dom'; import List from '@material-ui/core/List'; import ListItem from '@material-ui/core/ListItem'; import ListItemSecondaryAction from '@material-ui/core/ListItemSecondaryAction'; import ListItemText from '@material-ui/core/ListItemText'; import IconButton from '@material-ui/core/IconButton'; import SettingsIcon from '@material-ui/icons/Settings'; import Paper from '@material-ui/core/Paper'; import green from '@material-ui/core/colors/green'; import { makeStyles, createStyles } from '@material-ui/core/styles'; import { useHistory } from 'react-router-dom'; const useStyles = makeStyles((theme) => createStyles({ })); function AccountList(props) { const classes = useStyles(); const { officialAccounts } = props; const history = useHistory(); return ( <List> {officialAccounts.map((officialAccount, index) => { <ListItem button key={index} onClick={() => history.push('user_list/' + officialAccount.id)} > <ListItemText primary={officialAccount.name} secondary={officialAccount.permission_name} /> <ListItemSecondaryAction> <IconButton disabled={!officialAccount.pivot.permission_id} type="submit" onClick={() => history.push('official_account_manage/' + officialAccount.id)} > <SettingsIcon /> </IconButton> </ListItemSecondaryAction> </ListItem> })} </List> ); } export default AccountList;
試したこと
ちなみに、現状の理解は、
①初回レンダリング時にuseEffectが実行され、stateが空配列から変更される
②stateの変更に伴い、子コンポーネントに渡すpropsの値が変化するため、子コンポーネントで再レンダリングがおこる
③officialAccountsの情報がlistコンポーネントに表示される
というプロセスなのですが、この理解で合っていますでしょうか?
ちなみに、検証ツールでみたところ、Listと対応するul はありました。中身のlistitemにあたるliがありません。
つまり、officialAccountsが空の状態のままであり、関数コンポーネントが再呼び出しされていないということになると思います。
補足情報(FW/ツールのバージョンなど)
まだ回答がついていません
会員登録して回答してみよう