React native `useState`错误地链接单个Redux的多个实例+；反应本机组件

上下文

我已经创建了一个自定义的React原生文本组件，我称之为

TextInputSetting

，当用户在其中输入文本时，该组件应该会更新redux状态

如果我只使用一次该组件，它就可以正常工作，但一旦我尝试重用它，就会遇到问题（请参阅下面的GIF以了解我的意思）

在实验中，我发现如果复制组件定义（即创建

TextInputSetting2

），我会遇到同样的问题。但是，如果我复制组件并使用不同的变量名称作为调用

useState

的结果（即在一个组件定义中使用

testext2

&

setTempText2

，在另一个组件定义中使用

testext

&

setTempText

），则组件实例将按预期运行

问题

为什么我不能在可重用的React-Native+Redux组件中调用

useState

，并使其按预期工作

详细信息

TextInputSetting.js

import React, { useState } from "react";
import { Text, TextInput, View } from "react-native";
import { useDispatch, useSelector } from "react-redux";
import { updateSetting } from "./actions";

export const TextInputSetting = (props) => {
  const settings = useSelector((state) => state.settingsReducer);
  const dispatch = useDispatch();
  [tempText, setTempText] = useState(settings[props.settingKey]);

  return (
    <View style={[{ paddingLeft: 50, marginTop: 5, flexDirection: "row" }]}>
      <Text>{props.label}:</Text>
      <TextInput
        value={tempText}
        style={{
          backgroundColor: "yellow",
          borderWidth: 1,
          width: props.boxWidth,
          textAlign: "center",
        }}
        onChangeText={(text) => setTempText(text)}
        onEndEditing={() => dispatch(updateSetting(props.settingKey, tempText))}
      />
    </View>
  );
};

export const UPDATE_STATE = "UPDATE_STATE";

export const updateSetting = (k, v) => (dispatch) => {
  dispatch({
    type: UPDATE_STATE,
    payload: { key: k, value: v },
  });
};

import { UPDATE_STATE } from "./actions";

const defaultSettings = {
  set1: "default1",
  set2: "default2",
};

export const settingsReducer = (state = defaultSettings, action) => {
  switch (action.type) {
    case UPDATE_STATE:
      return { ...state, [action.payload.key]: action.payload.value };
    default:
      return state;
  }
};

import React from "react";
import { Text } from "react-native";
import { Provider } from "react-redux";
import { PersistGate } from "redux-persist/integration/react";
import { persistor, store } from "./store";
import { TextInputSetting } from "./TextInputSetting";

export default function App() {
  return (
    <Provider store={store}>
      <PersistGate loading={null} persistor={persistor}>
        <>
          <Text style={{ fontSize: 50, textAlign: "center", paddingTop: 200 }}>
            Hi there
          </Text>
          <TextInputSetting
            label="First Field"
            settingKey="set1"
            boxWidth={200}
          />
          <TextInputSetting
            label="Second Field"
            settingKey="set2"
            boxWidth={200}
          />
        </>
      </PersistGate>
    </Provider>
  );
}

reducers.js

import React, { useState } from "react";
import { Text, TextInput, View } from "react-native";
import { useDispatch, useSelector } from "react-redux";
import { updateSetting } from "./actions";

export const TextInputSetting = (props) => {
  const settings = useSelector((state) => state.settingsReducer);
  const dispatch = useDispatch();
  [tempText, setTempText] = useState(settings[props.settingKey]);

  return (
    <View style={[{ paddingLeft: 50, marginTop: 5, flexDirection: "row" }]}>
      <Text>{props.label}:</Text>
      <TextInput
        value={tempText}
        style={{
          backgroundColor: "yellow",
          borderWidth: 1,
          width: props.boxWidth,
          textAlign: "center",
        }}
        onChangeText={(text) => setTempText(text)}
        onEndEditing={() => dispatch(updateSetting(props.settingKey, tempText))}
      />
    </View>
  );
};

export const UPDATE_STATE = "UPDATE_STATE";

export const updateSetting = (k, v) => (dispatch) => {
  dispatch({
    type: UPDATE_STATE,
    payload: { key: k, value: v },
  });
};

import { UPDATE_STATE } from "./actions";

const defaultSettings = {
  set1: "default1",
  set2: "default2",
};

export const settingsReducer = (state = defaultSettings, action) => {
  switch (action.type) {
    case UPDATE_STATE:
      return { ...state, [action.payload.key]: action.payload.value };
    default:
      return state;
  }
};

import React from "react";
import { Text } from "react-native";
import { Provider } from "react-redux";
import { PersistGate } from "redux-persist/integration/react";
import { persistor, store } from "./store";
import { TextInputSetting } from "./TextInputSetting";

export default function App() {
  return (
    <Provider store={store}>
      <PersistGate loading={null} persistor={persistor}>
        <>
          <Text style={{ fontSize: 50, textAlign: "center", paddingTop: 200 }}>
            Hi there
          </Text>
          <TextInputSetting
            label="First Field"
            settingKey="set1"
            boxWidth={200}
          />
          <TextInputSetting
            label="Second Field"
            settingKey="set2"
            boxWidth={200}
          />
        </>
      </PersistGate>
    </Provider>
  );
}

App.js

import React, { useState } from "react";
import { Text, TextInput, View } from "react-native";
import { useDispatch, useSelector } from "react-redux";
import { updateSetting } from "./actions";

export const TextInputSetting = (props) => {
  const settings = useSelector((state) => state.settingsReducer);
  const dispatch = useDispatch();
  [tempText, setTempText] = useState(settings[props.settingKey]);

  return (
    <View style={[{ paddingLeft: 50, marginTop: 5, flexDirection: "row" }]}>
      <Text>{props.label}:</Text>
      <TextInput
        value={tempText}
        style={{
          backgroundColor: "yellow",
          borderWidth: 1,
          width: props.boxWidth,
          textAlign: "center",
        }}
        onChangeText={(text) => setTempText(text)}
        onEndEditing={() => dispatch(updateSetting(props.settingKey, tempText))}
      />
    </View>
  );
};

export const UPDATE_STATE = "UPDATE_STATE";

export const updateSetting = (k, v) => (dispatch) => {
  dispatch({
    type: UPDATE_STATE,
    payload: { key: k, value: v },
  });
};

import { UPDATE_STATE } from "./actions";

const defaultSettings = {
  set1: "default1",
  set2: "default2",
};

export const settingsReducer = (state = defaultSettings, action) => {
  switch (action.type) {
    case UPDATE_STATE:
      return { ...state, [action.payload.key]: action.payload.value };
    default:
      return state;
  }
};

import React from "react";
import { Text } from "react-native";
import { Provider } from "react-redux";
import { PersistGate } from "redux-persist/integration/react";
import { persistor, store } from "./store";
import { TextInputSetting } from "./TextInputSetting";

export default function App() {
  return (
    <Provider store={store}>
      <PersistGate loading={null} persistor={persistor}>
        <>
          <Text style={{ fontSize: 50, textAlign: "center", paddingTop: 200 }}>
            Hi there
          </Text>
          <TextInputSetting
            label="First Field"
            settingKey="set1"
            boxWidth={200}
          />
          <TextInputSetting
            label="Second Field"
            settingKey="set2"
            boxWidth={200}
          />
        </>
      </PersistGate>
    </Provider>
  );
}

从“React”导入React；
从“react native”导入{Text}；
从“react redux”导入{Provider}；
从“redux persist/integration/react”导入{PersistGate}；
从“/store”导入{persistor，store}；
从“/TextInputSetting”导入{TextInputSetting}；
导出默认函数App（）{
返回(
你好
);
}

代码

---

你可以自己运行代码；我在这里压缩了完整的示例（小于1MB）：

问题在这一行

[tempText, setTempText] = useState(settings[props.settingKey]);

应该是

const [tempText, setTempText] = useState(settings[props.settingKey]);

---

谢谢您的帮助！=）@不客气。