Question

当前使用 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', params: {...}, chartData: [{...}, ...], tableData: [{...}, ...], }, ... ] 组件将使用其 Chart 参数接受一个数组，该参数看起来类似于

data

Answer 1

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

diceThree

谢谢，您可以使用 searches = { [name]:{ params: {...}, chartData: [{}, {}, ...], tableData: [{}, {}, ...], } } 或 searches.foo 访问它。而不是总是根据名称进行过滤。

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

1 个答案: