setStateでstateの中身が変わっているのに再描画してくれない

Question

前提・実現したいこと

Reactのgrommetを使ってコンポーネントを作っています。
別コンポーネントからsetStateを使ってstateを変更したのちに、stateを利用して描画する箇所でリアルタイムに描画してほしいのですが、されません。
しかし、その後同じコンポーネントのボタンを押すと描画されます。
keyも振っているのでどうしてリアルタイムに描画されないのか、よくわかりません。
わかる方がいましたら、コメントお願いします。

発生している問題・エラーメッセージ

リアルタイムに再描画されない

該当のソースコード

//一部抜粋
<Box overflow={"scroll"} fill >
        {Object.entries(props.materials).map( //materialsが変わっていることは確認
          ([category, value], card_index) => (
            <Card
              flex={false}
              key={card_index}
            >

              <Box margin="xsmall">
                {value["サンプル"].map((value, box_index) => ( //ここに追加されてほしい
                  <Box border="true" key={box_index}>
                    <Box>
                      <Text size="medium" margin="xsmall">
                        {value}
                      </Text>
                    </Box> 
                    <Button />        
                  </Box>
                ))}
              </Box>
            </Card>
          )
        )}
      </Box>

試したこと

stateの中身は変わっていることを確認。
近くのボタンを押すと再描画される。

Answer 1

肝心のsetStateしている箇所が提示されていないのでエスパー回答になりますが・・・
おそらくsetStateで更新しようとしている値が配列やオブジェクト型で、this.stateで取得した値をそのまま加工してしまっているためだと思います。

配列なら[...this.state.hoge]、オブジェクトなら{...this.state.hoge}のように一旦別の変数に格納したものをsetStateしてはどうでしょうか？

Comments

[aiai8976]

一旦別の変数に入れてやっていましたが、
let temp = props.materials; → let temp = { ...props.materials };のように変更したら解決しました！
この違いは何でしょうか？

[nekoniki]

名前から推察するにprops.materialsは配列だと思います。
tempにはprops.materialsの参照が入っているので、前者のやり方だとtemp.pushをしても実質props.materials.pushをしているのと同じになってしまい、setStateより先にstateの値が書き変わってしまうためです。
後者はtempという別なインスタンスを生成しているので、push等を行ってもstateに影響がなくなり、正常に動くためです。

[aiai8976]

理解しました。ありがとうございました。