70743


React の
useStateで生成されたstate（`newOrTotal`)を子コンポーネントに渡して、setNewOrTotalで更新した時に`<div>{newOrTotal}</div>`は更新されるのに子コンポーネント`<Chart>`が更新されません。どうしたら更新されるのか。  
ご教示願えませんでしょうか。

`const [newOrTotal, setNewOrTotal] = useState(1);`

[code]

    <Chart
      key={data.id}
      id={data.id}
      group={data.group}
      newOrTotal={newOrTotal}
    />
    
[/code]

``

[code]

    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;
            }
            // 小数点２桁まで
            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>     
        );
    }
    
[/code]


CC BY-SA 4.0
2020-09-17T05:44:49.777
70479
2020-09-27T05:46:41.160
2020-09-17T08:22:57.323
3060
41945
question
javascript reactjs
Reactの子コンポーネントに親コンポーネントでuseStateで生成された値をPropsに渡した時の再描画について


`Chart`の実装を見てみないと正確な助言はできませんが、`Chart`の中で`newOrTotal`を改めて`useState`に放り込んでいないでしょうか？

純粋なpropsとして親から子に渡さないと更新されない状況にお見受けします。


CC BY-SA 4.0
2020-09-27T05:46:41.160
70743
2020-09-27T05:46:41.160
7997
70479
answer