Question

我有一个redux动作，该动作将获取所有数据并将其存储到全局Redux存储中。

我想使用Hooks将状态存储在本地状态中，以便在本地更改状态时不会更改实际状态。

我现在正在做的是

const [filteredTable, setFilteredTable] = useState([])

useEffect(() => {
    props.fetchDatabase();
    props.fetchOptions();
    setFilteredTable(props.filtered_table_data);
}, [])

在useEffect中，props.fetchDatabase()得到props.filtered_table_data，当我进行控制台操作时，我可以看到它。注销它。

但是，当我使用Hooks将其存储到本地状态并检查它是否在其中时，

console.log(filteredTable, 'filteredTable')

给我[]。

我在做什么错了？

Answer 1

我相信props.fetchDatabase()调用是异步的，因此在您尝试setFilteredTable时props.filtered_table_data尚未更新。

您可以尝试以下操作：

useEffect(() => {
    props.fetchDatabase();
    props.fetchOptions();
}, [])

useEffect(() => {
    setFilteredTable(props.filtered_table_data);
}, [props.filtered_table_data]);

请注意，此效果将在filtered_table_data每次更改时运行，因此，如果要限制设置本地状态，则可能需要使用某种条件在回调中包装代码。

Answer 2

useEffect的回调函数，其中[]作为钩子的第二个参数，仅在组件装入时才被调用一次。在其中fetchDatabase和fetchOptions内调用回调，然后（当尚未获取数据时）您调用setFilteredTable，这就是{{1 }}。

Answer 3

不确定是否可以回答您的问题，但是React-Redux提供了一些hooks来访问redux存储。您可能会感兴趣的一个是useSelector()钩子。

这是一个示例用法：

import { useSelector } from 'react-redux';

const App = () => {
  const tableData = useSelector(state => state.tableData);
  ...
}

使用React Hooks时将Redux状态设置为默认状态

3 个答案: