reactjs - 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;

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

标签： reactjsreact-hooksrenderinguse-state

Answer 1

问题是您在每次渲染时更新您的状态，这会导致新的重新渲染。如果你只想触发一次，你应该把它包在一个\[useEffect\]钩子里。

useEffect(() => {

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