如何解决在 React App 中处理可变数量的 `useState`
当前使用 useState
和 useEffect
的 React 应用程序从用户那里获取对象 params
并使用它来查询 API 服务器以获取结果 chartData
和 tableData
然后使用 Chart
和 Table
组件显示。这工作正常。
但是,现在必须修改应用以在 Chart
和Table
组件。无论搜索 Chart
的数量如何,总会有一个 Table
和一个 params
组件。
问题:这就是我被卡住的地方!我们如何维护单独的 useState
和 useEffect
,每组搜索 params
一个,以便当仅更改一个搜索 params
时,并非所有搜索都需要待完成,因为这些 params
保持不变。
此外,来自所有不同搜索 chartData
的所有 params
将组合在一起并传递到 Chart
组件中,类似于 TableData
及其 {{1 }} 组件。
当前应用
Table
编辑:我正在考虑以下数据结构,但无法弄清楚如何创建 React 钩子及其依赖项数组...
export function Main() {
const [ params,setParams ] = useState({name: 'foo'});
const [ chartData,setChartData ] = useState([]);
const [ tableData,setTableData ] = useState([]);
useEffect(() => {
axios
.get('http://localhost/chart',{params: params})
.then(response => {
setChartData(response.data)
})
axios
.get('http://localhost/table',{params: params})
.then(response => {
setTableData(response.data)
})
},[params])
return (
<div>
<Chart data={chartData} />
<Table data={tabletData} />
</div>
)
}
和 searches = [
{
name: 'foo',params: {...},chartData: [{},{},...],tableData: [{},},{
name: 'bar',chartData: [{...},tableData: [{...},...
]
组件将使用其 Chart
参数接受一个数组,该参数看起来类似于
data
解决方法
如果您使用的是 ES2015 或更高版本,则可以使用计算属性名称。
diceThree
谢谢,您可以使用 searches = {
[name]:{
params: {...},chartData: [{},{},...],tableData: [{},}
}
或 searches.foo
访问它。而不是总是根据名称进行过滤。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。