显示初始数据的效果挂钩

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 and React State Hooks

编辑：添加函数的其余部分

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 的 回调正在使用获取的数据设置您的 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)
      });
 }, []);

显示初始数据的效果挂钩

Effect hook for displaying initial data

reactjs

fetch-api

react-hooks