あなたが好きなボタンをタップするとき、あなたが以下のGIFを見るならばNo likes found 画面が表示され、すぐにlikes が表示される.

私は私のプロジェクトでこの似たようなタイプの不具合を見ました.問題はこのコードでした.

function LikesScreen() {
  const [isLoading, setIsLoading] = useState(true);
  const [likes, setLikes] = useState([]);
  useEffect(() =>  {
    setIsLoading(true);
    fetch("https://jsonplaceholder.typicode.com/todos/1").then((likes) => {
      setIsLoading(false);
      setLikes(likes);
    });
  }, []);

  if (isLoading) return <Loading />;
  if (likes.length === 0) {
    return <EmptyLikes />;
  }
  return <Likes likes={likes} />;
}

上のコードではisLoading stateがtrueです.

読み込み画面が表示されます.

その後、効果がトリガされます

ネットワーク要求を行い、約束はlikes データ.

これは面白いことが起こるところです.

React would not batch state updates triggered asynchronously i.e, in Promises, timeouts etc.

So setIsLoading(false) 再レンダリングをトリガーし、反応するだろう<EmptyLikes />Then setLikes(likes) 別の再レンダリングをトリガし、反応するだろう<Likes /> .
したがって、setisloading -> render -> setlike -> renderは問題の根本原因です.

どうやってこれを修正できますか？

マージによってこれを修正することができますisLoading and likes 状態更新が原子であるように状態を単一状態にする.

function LikesScreen() {
  const [{ isLoading, likes }, setState] = useState({
    isLoading: true,
    likes: []
  });
  useEffect(() => {
    setState((state) => {
      return { ...state, isLoading: true };
    });
    fetch("https://jsonplaceholder.typicode.com/todos/1").then((likes) => {
      setState({ likes, isLoading: false });
    });
  }, []);
  if (isLoading) return <Loading />;
  if (likes.length === 0) {
    return <EmptyLikes />;
  }
  return <Likes likes={likes} />;
}

So when there are states which have the information about the same context then they could be merged so that the state updates become atomic.

これは単純なケースですが、複雑な場合には、状態更新論理はより複雑で、コンポーネント全体に広がっているでしょう.
それらの場合では、Usereducerは状態更新ロジックのすべてを割り当てることによって本当に役に立つでしょう.

次のこと

これの後でさえ、問題がまだありえました.
状態が5つのブールフィールドを含むと考えてください.その後、合計可能な状態は2 pow 5 = 32である.

The component should handle all these possible 32 cases. Creating these type of components could be hard

それで、解決は違法な州を私がその中で書いていることについて表現するのが不可能にすることです🤗