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

我有默认的

App

功能，它在创建时提供react

我正在尝试获取一些用于初始显示的数据：

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);
        });
    }, []);

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

我试着跟着他走

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

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

函数应用程序（）{
//const people=[“Arnaud”、“Etienne”、“Riccardo”、“Ed”、“Jose”]；
const[people，setPeople]=useState（[]）；
const[filtered，setFiltered]=useState（人）；
useffect（（）=>{
取回（“http://localhost:8080/restApiTest）然后（res=>{
返回res.json（）；
})。然后（数据=>{
让数组_people=data.map（（p）=>{
返回p.firstName+“”+p.lastName；
});
setPeople（数组_-people）；
});
}, []);
console.log（人）；
常量过滤器人员=（数据）=>{
让过滤器=人。过滤器（（名称）=>{
返回name.toLowerCase（）.indexOf（data.toLowerCase（））！=-1；
});
设置过滤器（过滤器）；
};
返回(
);
}

问题在于，当useEffect的回调使用获取的数据设置您的

人员

状态时，

过滤的

状态仍然保持不变，即

[]

与新的

人员

状态不同。只是在初始装载时，您的

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)
      });
 }, []);

---

初始加载良好@prasanth可能与

fetch

调用有关？可能是..请检查当时的数据控制台。有关上述代码

console.log（人员）

它从

App

函数中立即调用。请在setPeople调用后在

useffect

on then函数中进行控制台。因为它在fetch finish之前执行为空，发生了什么？问题是我的数据只提取一次，所以在初始加载后，

people

状态没有变化，能做到吗？你不用担心。React负责优化。正如您所看到的，这个新的

useffect

只依赖于

people

状态。因此，它只会触发

人员

状态改变的次数。如果

人

只更改一次，它将只触发一次，不再触发。PS useEffects也会在初始装载时发射，因此在组件的整个生命周期中，它会准确地发射2次。：）您的解决方案可以工作，但必须调用

filterPeople（）

将空字符串作为参数传递。我只是担心在性能更高的函数的情况下，必须调用它进行渲染可能并不理想。在这种情况下，请参考更新的答案。：）