Question

学习钩子，尝试使用useEffect读取JSON文件，打算setState为数组并渲染到列表，但程序似乎没有在useEffect处运行第一次。

useEffect(() => {
  getData()
})

const [people, setPeople] = useState([])

const getData = () => {
  Json.forEach(person => add(person))
}

const add = (person) => {
  const peopleCopy = people
  const newPerson = {
    firstName: person.firstName
  }
  peopleCopy.push(newPerson)
  setPeople(peopleCopy)
}

完整示例：https://codesandbox.io/s/adoring-architecture-s0jpd?file=/App.js

Answer 1

您需要像这样修复 app.js。

import React, { useEffect, useState } from "react";
import Json from "./data.json";

const App = () => {
  const [people, setPeople] = useState([]);
  useEffect(() => {
    setPeople(Json.map((person) => ({ firstName: person.firstName })));
  }, []);

  const list = people.map((e, i) => <div key={i}>{e.firstName}</div>);

  return (
    <div>
      {people.length}
      {list}
    </div>
  );
};

export default App;

Answer 2

useEffect 本身工作正常。您只是在改变现有状态（people 数组），因此组件不会重新渲染。

const peopleCopy = people 并没有真正创建副本。您只需创建一个指向原始 people 数组的变量即可。

但即使您在那时创建了一个新数组，它也不会正常工作，因为您将在每次迭代时重置它

您需要将 add 重写为类似

const add = (person) => {
  const newPerson = {
    firstName: person.firstName
  };
  setPeople((currentPeople) => [...currentPeople, newPerson]);
};

并且您还需要将 [] 作为依赖项添加到 useEffect 以避免在每次重新渲染时运行它。

useEffect(()=>{    
  getData()
}, [])

所以，总共：https://codesandbox.io/s/vigorous-mcclintock-ogrzn?file=/App.js

React 不会在第一次渲染 useEffect

2 个答案: