Question

每次我使用react和useEffect方法时，我的状态变量都会呈现两次。一次为空变量，下一个为期望变量。我现在和将来有什么办法可以避免这个问题？

import React, { useState,useEffect } from "react";

export default function Member (props) {

  const [team,setTeam] = useState([]);
  useEffect(() => {
    let array = ["hello","hi"];
    setTeam(array);
  }, [])

  console.log(team);
  return (
    <>
     {team.forEach(i => <p>{i}</p>)}
    </>
  )
}

Answer 1

您需要使用map来在JSX中渲染数组：

export default function Member(props) {
  const [team, setTeam] = useState([]);
  useEffect(() => {
    let array = ["hello", "hi"];
    setTeam(array);
  }, []);

  console.log(team);
  return (
    <>
      {team.map(i => ( // use map here
        <p>{i}</p>
      ))}
    </>
  );
}

forEach不返回任何内容，因此您不能使用它来呈现这样的组件。

也可以在代码中代替使用useEffect设置初始状态，而可以直接在useState中设置它：

export default function Member(props) {
  const [team, setTeam] = useState(["hello", "hi"]);

  console.log(team);
  return (
    <>
      {team.map(i => ( // use map here
        <p>{i}</p>
      ))}
    </>
  );
}

Answer 2

这是一个明显的行为。

首次以初始状态渲染组件。在useEffect（componentDidMount）之后，再次重新渲染。

因此，您得到两个console.log。

为避免这种情况，您需要初始设置状态，

const [team,setTeam] = useState(["hello","hi"]);

并删除useEffect。

注意：：forEach不会打印数据，您需要在此处map

{team.map(i => <p key={i}>{i}</p>)} //provide a key here

为什么我的状态变量在reactjs中被渲染两次

2 个答案: