在 React App 中处理可变数量的 useState

Question

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

但是，现在必须修改该应用程序以在Chart 和 Table 组件。无论搜索次数如何 params.

，总会有一个 Chart 和一个 Table 组件

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

此外，来自所有不同搜索 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: [{...}, ...],
    },
    ...
]

Answer 1

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

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

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

在 React App 中处理可变数量的 useState

Handling a Variable Number of `useState` in React App

javascript

reactjs

react-hooks

react-state