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

【问题标题】：Setting Redux state as a default state when using React Hooks使用 React Hooks 时将 Redux 状态设置为默认状态
【发布时间】：2019-10-30 18:29:29
【问题描述】：

我有一个 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')

只给我[]。

我做错了什么？

【问题讨论】：

标签： reactjs redux react-hooks

【解决方案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 更改时都会运行此效果，因此如果您想限制设置本地状态，可能需要使用某种条件将回调中的代码包装起来。

【讨论】：

但是当组件加载时我需要调用props.fetchData()
您仍然可以在单独的效果中调用props.fetchDatabase()，该效果仅在组件加载时运行。我已经修改了我的原始答案以显示这一点。

【解决方案2】：

useEffect 以[] 作为钩子的第二个参数的回调仅在组件刚挂载时被调用一次。在其中调用fetchDatabase 和fetchOptions 回调，然后（当尚未获取数据时）调用setFilteredTable，这就是filteredTable 中出现空数组的原因。

【讨论】：

有什么建议可以解决吗？
一个可能的选择是添加另一个 useEffect 钩子，它将在 filtered_table_data 上查看，当它到达时调用 setFilteredTable: useEffect(() => setFilteredTable(filtered_table_data), [filtered_table_data])

【解决方案3】：

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

这是一个示例用法：

import { useSelector } from 'react-redux';

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

【讨论】：