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

Posted 2023-02-27

【中文标题】用于显示初始数据的效果挂钩

【英文标题】：Effect hook for displaying initial data

【发布时间】：2020-04-22 17:15:59

【问题描述】：

我有 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

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

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

【问题讨论】：

初始加载很好codesandbox.io/s/cocky-star-bmor3

@prasanth 也许与fetch 通话有关？

可能是..请检查当时的数据控制台。

对于上面的代码console.log(people);，它立即从App函数调用。请在useffect内的控制台上调用setPeople之后的函数。因为它在获取完成之前执行

是空的，怎么回事？

【参考方案1】：

问题在于，当 useEffect 的 回调使用获取的数据设置您的 people 状态时，filtered 状态仍然保持不变，即 []，而不是按照新的 @987654324 @ 状态。只是在初始安装时，您的 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)
      );
 , []);

【讨论】：

问题是我的数据只取了一次，所以初始加载后people的状态没有变化，可以吗？

您无需担心。 React 负责优化。如您所见，这个新的useEffect 仅依赖于people 状态。因此，它只会触发people 状态改变的次数。如果people 只更改一次，它只会触发一次，不再触发。 PS useEffects 也会在初始安装时触发，因此它会在组件的整个生命周期中触发 2 次。 :)

您的解决方案有效，但必须调用filterPeople() 传递一个空字符串作为参数。我只是担心在性能更高的函数的情况下，必须调用它进行渲染可能并不理想。

在这种情况下，请参考更新后的答案。 :)