React の useStateで生成されたstate(newOrTotal
)を子コンポーネントに渡して、setNewOrTotalで更新した時に<div>{newOrTotal}</div>
は更新されるのに子コンポーネント<Chart>
が更新されません。どうしたら更新されるのか。
ご教示願えませんでしょうか。
const [newOrTotal, setNewOrTotal] = useState(1);
<Chart
key={data.id}
id={data.id}
group={data.group}
newOrTotal={newOrTotal}
/>
``
import React, { useEffect, useState } from "react";
import { Card, ToggleButtonGroup, ToggleButton } from 'react-bootstrap';
import { useApp } from '../context'
import { Chart } from "./Chart";
import { ChartPrefecture } from "./ChartPrefecture";
// 引数にタイトル、エレメントIDを持つようにする
export const CardOriginal = ({ data }) => {
// new: 1, total: 2
const [newOrTotal, setNewOrTotal] = useState(1);
const {state, statePrefectureGraph} = useApp();
// 累計
const getTotal = () => {
let total = 0;
let dayBeforeRatio = 0;
if(data.group == 1 &&
state[data.id] &&
state[data.id].total) {
total = state[data.id].total;
dayBeforeRatio = state[data.id].dayBeforeRatio;
}
if(data.group == 2 &&
statePrefectureGraph[state.prefId] &&
statePrefectureGraph[state.prefId][data.id] &&
statePrefectureGraph[state.prefId][data.id].total) {
total = statePrefectureGraph[state.prefId][data.id].total;
dayBeforeRatio = statePrefectureGraph[state.prefId][data.id].dayBeforeRatio;
}
// 小数点2桁まで
if(!Number.isInteger(total)) total = total.toFixed(2);
if(!Number.isInteger(dayBeforeRatio)) dayBeforeRatio = dayBeforeRatio.toFixed(2);
return {total, dayBeforeRatio};
}
useEffect(() => {
let unmounted = false;
//アンマウントされていなければステートを更新
if(!unmounted) {
console.log('newOrTotal: ', newOrTotal)
console.log('data.id: ', data.id)
}
//クリーンアップ関数を返す
return () => { unmounted = true; };
}, [newOrTotal]);
const toggleOnChange = () => {
if(newOrTotal == 1) setNewOrTotal(2);
if(newOrTotal == 2) setNewOrTotal(1);
}
return (
<Card>
<Card.Body>
<Card.Title>
{data.group == 1 ? (data.title) : (`${state.prefJa}の${data.title}`)}
</Card.Title>
<Card.Subtitle>
9月6日時点
</Card.Subtitle>
<Card.Text className='float-right total'>
累計<span>{getTotal().total}</span>
</Card.Text>
<br />
<Card.Text className='float-right day-before-ratio'>
前日比{getTotal().dayBeforeRatio}
</Card.Text>
<div>{newOrTotal}</div>
<div className='btn-wwrapper'>
<div className='btn-wrapper'>
<ToggleButtonGroup
type='radio'
name='xxx'
defaultValue={1}
onChange={toggleOnChange}
>
<ToggleButton
value={1}
className='btn-sm'
>
新規
</ToggleButton>
<ToggleButton
value={2}
className='btn-sm'
>
累計
</ToggleButton>
</ToggleButtonGroup>
</div>
</div>
{data.group == 1 ?
(<Chart
key={`chart_xxx_${data.id}_${data.group}`}
id={data.id}
group={data.group}
newOrTotal={newOrTotal}
/>) :
(<ChartPrefecture
id={data.id}
group={data.group}
/>)
}
</Card.Body>
</Card>
);
}