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

Question

我想使用 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;

我该如何解决这个问题？

Answer 1

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

useEffect(() => {

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

Answer 2

问题是以下代码：

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

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

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

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

Too many re-renders issues in react-hooks

rendering

reactjs

react-hooks

use-state