子からデータを渡すときにNext.jsのリスト表示を更新

0
2022.01.15

次のページコンポーネント.jsは次のようになります。

export default function Index({ containers }) {
  const [containerListState, setContainerListState] = useState(containers);

  const updateContainerList = (container) => {
    containers.push(container);
    setContainerListState(containers);
  };

  return (
    <>
      <FormCreateContainer updateContainerList={updateContainerList} />
      <ContainerList containers={containerListState} />
    </>
  );
}

コンテナーの作成を許可します。その API 呼び出しが解決したら、updateContainerList を呼び出して、新しく作成されたコンテナーを親に渡します。これは動作します。

ただし、コンテナーの一部としてコンテナーリスト (コンテナー.map() を使用する単純な動的リスト) にこのコンテナーを渡す必要があります。コンテナへのプッシュは意図したとおりに動作しますが、Nextはコンテナのリストをライブアップデートしません。新しく作成されたコンテナは、ページを再読み込みしたときにのみ表示されます。

私は、次のようにuseEffectとupdateContainerListを変更することを含めると思ったが、悲しいにもうまくいかなかった。

  const updateContainerList = (container) => {
    containers.push(container);
  };

  useEffect(() => {
    setContainerListState(containers);
  }, [containers]);

子コンポーネントから親コンポーネントにデータを正しく渡し、別の子コンポーネントにデータを渡し、ページを再ロードせずに動的リストを更新するにはどうすればよいですか?

私は私の目標を達成するのに役立たなかった広範な研究をしたので、私は本当に任意の助けに感謝しています。

回答
2
2022.01.15

まず第一に、小道具の値を変更しないでください。

私はあなたがこのように小道具を変更せずにデータを更新するためにsetContainerListStateを使用する必要があると思います:

const updateContainerList = (container) => {
    setContainerListState(containers => [...containers, container]);
};

これにより、コンポーネントとそのすべての子が自動的に再レンダリングされます。