有人能给我解释一下传递数据的正确方法是什么吗?

Question

考虑这个场景:在应用程序中只有一个屏幕-App.js。

屏幕上有5个组件:compA, compB, ...

所以只有一个api来获取这个应用程序使用的所有数据:

axios.get('database/getAll')

假设从api返回100个对象。并不是说我只想把数据的一个子集传递给每个组件。

场景1

我调用了屏幕App.js中的API。然后，我还将所有数据传递给每个组件。这意味着我将所有100个对象传递给每个组件，并过滤组件

中的数据场景2

我在App.js中调用API。我在App.js的useEffect钩子中过滤数据。然后将过滤后的数据传递给它们各自的组件。

useEffect(() => {
axios.get('alldata').then((res) => {
let allData = res.data;

let compAData = allData.filter((data) => data.category === 'compA')
setStateCompAData(compAData);
let compBData = allData.filter((data) => data.category === 'compB')
setStateCompBData(compBData);
let compCData = allData.filter((data) => data.category === 'compC')
setStateCompCData(compCData);
})
},[])
return (<div>
<CompA data={stateCompAData}/>
<CompB data={stateCompBData}/>
<CompC data={stateCompCData}/>
</div>)

场景3

我不调用App.js中的API -我每次都在组件useEffect and filter中调用它们各自的组件中的API。

那么什么是正确的用例场景呢?

Answer 1

所有3种方法都将获得相同的结果，但场景2可能是最佳实践。但是，我不建议维护3个不同的状态值，而是建议使用单个对象状态包含不同的数据结构，如

{
dataA: ...,
dataB: ...,
dataC: ...
}