ReactにおけるStateとhistory.pushについて

Question

Reactを使った簡単なWebアプリを作成したいのですが,下記の工程でエラーが出てしまいます.

• ユーザが選択を行う
• 選択肢がなくなると,API通信を行い選択内容から結果を表示(この時に/resultページに移動)
• エラー発生

Warning: Cannot update during an existing state transition (such as within `render`). 
Render methods should be a pure function of props and state.

//選択ページで選択肢が1以下になった時にhandleSearchをよびたして移動.
 if (array.length <= 1) {
    handleSearch();
    history.push("/result");
  }

//hooks
const handleSearch = async () => {
    if (select.length < 1) return;
    const recip =  await API.search(select); //API通信を行い,select内容を送信して結果を受け取る
    dispatch(get(recip.result));//(useReducerを使い,stateを更新)
  };

個人的な考えではありますが,stateが変更されるとレンダリングが走るのが関係しているのかなと思っています
解決策をご存知の方はどうかよろしくお願いします.

Comments

[maisumakun]

if (array.length <= 1)のブロックは「どこに」書いていますか？

[2_34_koki]

<Switch>
<Route path="/result">
<Result result={result} />
</Route>
<Route path="/">
<Menu
state={state}
mode={select.length}
handleSearch={handleSearch}
handleSelect={handleSelect}
selectFilter={selectFilter}
/>
</Route>
</Switch>

上記のようにページを分けており, Menuというコンポーネントに書いています.

[maisumakun]

Menuというコンポーネント内で、どのように書いていますか？

[2_34_koki]

export const Menu: FC<Props> = ({ state, mode, handleSearch, handleSelect, selectFilter }) => {
let history = useHistory();

const array = mode === 0 ? state.large : mode === 1 ? selectFilter(state.medium)
: mode === 2 ? selectFilter(state.small) : [];

if (array.length <= 1) {
handleSearch();
history.push("/result");
}

return (
<MenuList array={array} handleSelect={handleSelect} />
);
};

[Zuishin]

https://teratail.com/questions/275000 で回答しています。わかったのかわからなかったのか、何か言ってください。

Answer 1

関数コンポーネントの関数は、何度実行されるかわかりません。ということで、その中で副作用が発生することを行うのは適当ではありませんし、setStateすれば提示されたような警告も出ます。

useEffectの中で処理を行ってください。

export const Menu: FC<Props> = ({ state, mode, handleSearch, handleSelect, selectFilter }) => {

  const array = mode === 0 ? state.large : mode === 1 ? selectFilter(state.medium)
    : mode === 2 ? selectFilter(state.small) : [];

  const searchCond = array.length <= 1;
  useEffect(() => {
    if (array.length <= 1) {
      handleSearch();
    }
  }, [searchCond, handleSearch])


  return (
    <MenuList array={array} handleSelect={handleSelect} />
  );
};