react-hooks 中的重新渲染问题太多答案

【问题标题】：Too many re-renders issues in react-hooksreact-hooks 中的重新渲染问题太多
【发布时间】：2021-03-22 20:36:00
【问题描述】：

我想使用 UseState 将聊天屏幕拆分为 Container 和 Presenter。但是这两天我遇到了太多渲染问题。

这是 Container.jsx

import React, { useState } from "react";
import ChatsPresenter from "./ChatPresenter";

const ChatContainer = () => {
  const [title, setTitle] = useState({
    user: [""],
  });
  const [loading, setLoading] = useState(false);
  const [error, setError] = useState(null);
  try {
  } catch (e) {
    setError({ e: "에러가 났어요????" });
  } finally {
    setLoading({ loading: false });
  }

  return (
    <>
      <ChatsPresenter>{title.user}</ChatsPresenter>
    </>
  );
};

export default ChatContainer;

这是 Presenter.jsx

import React from "react";
import styled from "styled-components";
import Loading from "../Loading";

const ChatsPresenter = ({ title, loading, error }) => {
  return (
    <>
      {loading ? (
        <Loading />
      ) : (
        <>
          <Container title="Kim" />
        </>
      )}
    </>
  );
};

export default ChatsPresenter;
const Container = styled.div`
  font-size: 14px;
`;

这是 index.jsx

import ChatContainer from "./ChatContainer";
export default ChatContainer;

我应该如何解决这个问题？

【问题讨论】：

标签： reactjs react-hooks rendering use-state

【解决方案1】：

问题是您在每次渲染时更新您的状态，这会导致新的重新渲染。如果您只想触发一次，则应将其包装在 \[useEffect\] hook 中。

useEffect(() => {

      try {
      } catch (e) {
        setError({ e: "에러가 났어요?" });
      } finally {
        setLoading({ loading: false });
      }
}, [])

【讨论】：

【解决方案2】：

问题在于以下代码：

 try {
  } catch (e) {
    setError({ e: "에러가 났어요?" });
  } finally {
    setLoading({ loading: false });
  }

每当您的组件呈现时，您都会更改状态并重新呈现它。为了避免这种情况，您可以使用 useEffect。

useEffect(() => {
  if(error){
   //set your states
 }
})

【讨论】：