即使我只是更新嵌套属性，Redux 商店也会更新所有内容？答案

【问题标题】：Redux store updates everything even if I just update a nested attribute?即使我只是更新嵌套属性，Redux 商店也会更新所有内容？
【发布时间】：2021-04-28 10:02:27
【问题描述】：

在我的应用程序中，用户应该可以编辑他的名字。我想过将他的初始名称作为默认值useState()。这非常有效 - 名称也会更新。

function EditName(props) {
    const { navigation, dispatch, initFirstName } = props;

    const [text, setText] = useState(initFirstName);

    return (
      <>
        <Button title="Save" onPress={() => dispatch(updateFirstName(text))} />
        <TextInput
          style={{ height: 40, borderColor: 'gray', borderWidth: 1 }}
          onChangeText={(inp) => setText(inp)}
          value={text}
        />
      </>

    )


}

function mapStateToProps(state) {
  return (
    {
      initFirstName: state.user.data.firstName,
    }
  );
}

export default connect(mapStateToProps)(EditName);

但是现在我遇到了一个问题，如果用户点击保存按钮并处理dispatch(updateFirstName(text))。 text 再次被initFirstName 覆盖。

我的 Redux（工具包）存储结构如下：

{
  data: {
    firstName: "Test"
  },
  updateFirstName: {
   pending: null,
   error: null,
  },    
}

updateFirstName(text) 方法调度一个设置state.updateFirstName.pending = true; 的操作。如果我把它排除在外 - 一切正常。

所以我猜想创建了一个对存储（状态）的新引用，React 认为：“哦 - 我有一个新的 initFirstName”（此外它仍然是相同的，因为尚未发生更新）。

有什么更好的方法来做到这一点？有什么办法可以解决这个问题？

【问题讨论】：

你的EditName 组件是如何使用的？
这是我的 react native 项目中的一个屏幕。所以它是在 StackNavigator 中定义的。
我猜问题是当你更新EditName 组件的状态时得到rerenders 并且你需要避免它
是的——我也这么认为。一般来说，您将如何避免这种情况或解决这种用例？
我认为您以错误的方式使用EditName，如果我没有看到您的代码的可重现示例，我无法回答

标签： reactjs react-native redux redux-toolkit

【解决方案1】：

也许尝试创建一个将被调用的函数，而不是为onPress 分配一个箭头函数。基本上，函数会以text的初始值被调用。

确保使用text 的当前值，试试这个：

const saveHandler = () => {
    dispatch(updateFirstName(text))
}
...
<Button title="Save" onPress={saveHandler} />

【讨论】：

【解决方案2】：

@Taghi Khavari 有一个很好的猜测：它与我在 StackOverflow 上发布的代码无关 - 这是一个 React Navigation 问题。

我在我的应用程序中使用nested navigators。我在App 函数中声明了嵌套导航器，这导致EditName 组件在状态更改后多次重新安装（虽然我实际上不知道为什么）。

当我在我的 App 函数之外声明嵌套导航器时（如下例所示），它起作用了，并且组件只安装了一次。谁能解释一下为什么？

function Home() {
  return (
    <NestedStack.Navigator>
      <NestedStack.Screen name="Profile" component={Profile} />
      <NestedStack.Screen name="Settings" component={Settings} />
    </NestedStack.Navigator>
  );
}

function App() {
  return (
    <NavigationContainer>
      <RootStack.Navigator mode="modal">
        <RootStack.Screen
          name="Home"
          component={Home}
          options={{ headerShown: false }}
        />
        <RootStack.Screen name="EditPost" component={EditPost} />
      </RootStack.Navigator>
    </NavigationContainer>
  );
}

【讨论】：