8 の対応の１つ。

yo16 commented 3 months ago

見たことのないエラーが出た。

TableStructQuerySelectBox.tsx:65 Warning: Cannot update a component (TableStructQuerySelectBox) while rendering a different component (ClauseColumnsBox). To locate the bad setState() call inside ClauseColumnsBox, follow the stack trace as described in https://reactjs.org/link/setstate-in-render
    at ClauseColumnsBox (http://localhost:5173/src/UIComponents/CanvasComponents/ClauseColumnsBox.tsx?t=1723013212567:28:3)
    at g
    at TableStructQuerySelectBox (http://localhost:5173/src/UIComponents/CanvasComponents/TableStructQuerySelectBox.tsx?t=1723013282919:28:3)
    at TableStructQueryBox (http://localhost:5173/src/UIComponents/CanvasComponents/TableStructQueryBox.tsx?t=1723013282919:20:3)
    at g
    at svg
    at div
    at div
    at TransformComponent (http://localhost:5173/node_modules/.vite/deps/react-zoom-pan-pinch.js?v=ae7801fa:1841:21)
    at http://localhost:5173/node_modules/.vite/deps/react-zoom-pan-pinch.js?v=ae7801fa:1617:43
    at div
    at LineageCanvas (http://localhost:5173/src/UIComponents/LineageCanvas.tsx?t=1723013282919:25:26)
    at div
    at Contents (http://localhost:5173/src/UIComponents/Contents.tsx?t=1723013282919:26:33)
    at div
    at App

ChatGPTによると、

このエラーは、ClauseColumnsBoxコンポーネント内でsetStateを使用して状態を更新している間に、TableStructQuerySelectBoxコンポーネントを更新しようとしているために発生しています。これは、Reactのレンダリングサイクル中に他のコンポーネントを更新しようとする場合に一般的な警告です。

この問題を解決するには、以下のような対策を考えてみてください：

setStateのタイミングを調整する:
- 状態の更新をuseEffectフックなどを使って、コンポーネントがすべてレンダリングされた後に行うようにします。
親コンポーネントでの状態管理:
- 状態を親コンポーネントに移動し、必要な子コンポーネントに状態を渡すことで、状態管理を一元化することを考慮してください。これにより、状態が変更されたときに親コンポーネントで一括して再レンダリングを制御できます。
カスタムフックを利用する:
- 状態の更新が複雑な場合は、カスタムフックを作成し、ロジックを分離することで、よりクリーンな設計にすることができます。

とのこと。子コンポーネントで個別に状態管理して描画しようと思ってたけど、Reactの思想と合わないのかな。

yo16 commented 2 months ago

上のcommitでfixされたのでclose

yo16 / sql_parse_client_202407

親への通知はフックを通さずに実行する #9

8 の対応の１つ。