在 React App 中处理可变数量的“useState”答案

【问题标题】：Handling a Variable Number of `useState` in React App在 React App 中处理可变数量的“useState”
【发布时间】：2021-02-04 00:59:57
【问题描述】：

当前使用useState 和useEffect 的React 应用程序从用户那里获取一个对象params 并使用它来查询API 服务器以获取结果chartData 和tableData 然后显示使用Chart 和Table 组件。这很好用。

但是，现在必须修改应用以在Chart 和@987654329 上同时显示多个（和可变个）搜索结果@ 组件。无论params的搜索次数如何，总会有一个Chart和一个Table组件。

问题：这就是我卡住的地方！我们如何维护单独的useState 和useEffect，每组搜索一个params，这样当只有一个搜索params 被更改时，并不是所有的搜索都需要完成，因为这些@987654337 @ 保持不变。

此外，来自所有不同搜索 params 的所有 chartData 将组合在一起并传递到 Chart 组件中，TableData 及其 Table 组件也是如此。

当前应用


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

编辑：我正在考虑以下数据结构，但无法弄清楚如何创建 React 钩子及其依赖数组...

searches = [
    {
        name: 'foo',
        params: {...},
        chartData: [{}, {}, ...],
        tableData: [{}, {}, ...],
    },
    {
        name: 'bar',
        params: {...},
        chartData: [{...}, ...],
        tableData: [{...}, ...],
    },
    ...
]

和Chart 组件将使用其data 参数接受一个数组，该参数看起来类似于

[
    {
        name: 'foo',
        data: [{...}, ...],
    },
    {
        name: 'bar',
        data: [{...}, ...],
    },
    ...
]

【问题讨论】：

标签： javascript reactjs react-hooks react-state

【解决方案1】：

如果您使用的是 ES2015 或更高版本，则可以使用计算属性名称。

searches = {
    [name]:{
        params: {...},
        chartData: [{}, {}, ...],
        tableData: [{}, {}, ...],
    }
}

感谢您以searches.foo 或searches.bar 访问它。而不是总是根据名称进行过滤。

【讨论】：