Question

-编辑-我创建了一个codeandbox：https://codesandbox.io/s/xenodochial-hofstadter-d3jjo

我开始挠头，想寻求一些帮助-我想-一个简单的问题。

我有一个基本的App组件，可呈现受控文本输入。提交此输入后，它将在后端创建一条消息，该消息将更新redux存储。在这部分上一切似乎都工作正常。

我的问题是，当我添加新消息后，尝试添加一个useEffect钩子以重置输入值时。我注意到依赖useEffect的{{1}}在每个渲染器上都被调用，而不仅仅是[messages]发生变化时被调用。输入的简单操作（会导致每个字符都重新呈现）会使钩子触发，即使它仍然是相同的值：一个空数组。

基本上，我注意到，只有在我的messages返回数组的相同实例时，它才能按预期工作。因此，如果我只读useSelector，则它将起作用，因为数组不会更改。但是只需添加一个state.messages.allIds，它每次都会返回一个新实例。我添加了react-redux的.map(x => x)来尝试解决此问题，但无济于事，而且我不明白为什么它不能解决我的问题。

shallowEqual

Answer 1

也许您可以使用useMemo？

 const messages = useSelector(
    (state: RootState) => (
      state.messages
    )
  );

 let mapped  = useMemo(() => messages.allIds.map((id: string) => messages.byId[id]), [messages]);

现在到处使用mapped。

Answer 2

这可能很晚了。但这可能会使面临相同问题的其他人受益。

如果您不希望函数在状态更改时重新呈现，而只希望提取redux状态变量的值，则可以使用useState

const state = useState();
const yourVariable = state.getState().reduxStateVariable;

useSelector挂钩和渲染

2 个答案: