用于显示初始数据的效果挂钩

Question

我具有在创建时react提供的默认App函数。

我正在尝试获取一些数据以进行初始显示：

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

useEffect(() => {
        fetch("http://localhost:8080/restApiTest").then(res => {
            return res.json();
        }).then(data => {
            let array_people = data.map((p) => {
                return p.firstName + ' ' + p.lastName;
            });
            setPeople(array_people);
        });
    }, []);

问题在于，仅当我重新渲染子组件时才渲染此数据。如何加载初始数据？

我尝试关注React Effect Hooks和React State Hooks

Edit：添加其余功能

function App() {
    // const people = ["Arnaud", "Etienne", "Riccardo", "Ed", "Jose"];
    const [people, setPeople] = useState([]);
    const [filtered, setFiltered] = useState(people);

    useEffect(() => {
        fetch("http://localhost:8080/restApiTest").then(res => {
            return res.json();
        }).then(data => {
            let array_people = data.map((p) => {
                return p.firstName + ' ' + p.lastName;
            });
            setPeople(array_people);
        });
    }, []);


    console.log(people);

    const filterPeople = (data) => {
        let filters = people.filter((name) => {
            return name.toLowerCase().indexOf(data.toLowerCase()) !== -1;
        });
        setFiltered(filters);
    };

    return (
        <div className="App">
            <div>
                <SearchBar onEnter={filterPeople}/>
                <SortableList people={filtered}/>
            </div>
        </div>
    );
}

Answer 1

问题是，当useEffect's回调函数使用获取的数据设置您的people状态时，filtered状态仍然保持不变，即[]，而不是新的people状态。只是在初始安装时，您的filtered状态将被设置为people状态，而不是您期望的每个后续重新渲染。要使用获取的数据更新filtered状态，您必须在useEffect中显式调用setFiltered函数，如下所示：

useEffect(() => {
    fetch("http://localhost:8080/restApiTest")
      .then(res => res.json())
      .then(data => {
         let array_people = data.map((p) => {
             return p.firstName + ' ' + p.lastName;
         });
         setPeople(array_people);
         setFiltered(array_people)
      });
 }, []);