React Native useState onChangeText答案

【问题标题】：React Native useState onChangeTextReact Native useState onChangeText
【发布时间】：2021-05-27 08:41:15
【问题描述】：

您好，我想知道为什么这段代码有效，抱歉，sintax 错误，这是一个示例。我的问题是为什么 memberIpAssignments 正在获取 ip 价值？如果我没有将 ip 传递到 setMemberIpAssignments(arr =>[...arr]) 中，我不会得到它，但仍然会采用该值并更新状态。

setMemberIpAssignments(arr =>[...arr])，这个状态根本不应该改变，因为我没有给 ip 值。但它确实改变了 ip 值。如果有人可以向我解释，我将不胜感激。我是 react-native 的新手

export const zeroTierNetworkMembersUpdateScreen = ({ route }) => {
  const { ipAssignments } = ["192.168.0.1","192.168.1.1"];
  const [memberIpAssignments, setMemberIpAssignments] =(ipAssignments);

  return (
    <View style={styles.viewSet}>
     {memberIpAssignments.map((eachIpAssignments, index) => {
        return (
          <Input
            key={index}
            placeholder={"ipAssignments"}
            keyboardType={"default"}
            value={eachIpAssignments}
            onChangeText={(value) => {
              var ip = ipAssignments;
              ip[index] = value;
              setMemberIpAssignments(arr =>[...arr]);
            }}
          />
        );
      })}
    </View>
  );
};

【问题讨论】：

您的语法不正确。您正在对数组使用对象解构。这将在 ipAssignments 变量上返回 undefined。 developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/…
除了语法错误，您正在使用功能状态更新。它是一个传递先前状态供您使用的函数。 setMemberIpAssignments(arr =>[...arr]) 只是将先前的状态数组传播到一个新的数组引用中并返回它。除了触发重新渲染之外，它没有做任何事情。
对不起sintax错误，这是一个例子，真正的代码是一个数组。我的观点是为什么“memberIpAssignments”取“ip”值？如果我没有将“ip”传递给“setMemberIpAssignments”，但我仍然接受它的值并更新状态，我就不明白了。
如果我不得不说，它是对象突变。您使用ipAssignments 初始化您的状态，并且您直接在onChangeText 处理程序中改变该ipAssignments 对象。 setMemberIpAssignments(arr =>[...arr]); 只是重新分配数组引用并触发重新渲染，从而暴露了无意突变的副作用，您会看到更新的数据。

标签： javascript android reactjs react-native expo

【解决方案1】：

我想我已经证实了我的怀疑，即您实际上正在改变您存储在本地组件状态中的对象引用。

export const zeroTierNetworkMembersUpdateScreen = ({ route }) => {
  // (1) ipAssignments array reference
  const ipAssignments = ["192.168.0.1", "192.168.1.1"];

  // (2) memberIpAssignments references ipAssignments
  const [memberIpAssignments, setMemberIpAssignments] = useState(ipAssignments);

  return (
    <View style={styles.viewSet}>
     {memberIpAssignments.map((eachIpAssignments, index) => {
        return (
          <Input
            key={index}
            placeholder={"ipAssignments"}
            keyboardType={"default"}
            value={eachIpAssignments} // (3) value from memberIpAssignments
            onChangeText={(value) => {
              // (4) ip references ipAssignments & memberIpAssignments
              var ip = ipAssignments;
              // (5) element mutation!!
              ip[index] = value;
              // (6) state update to trigger rerender
              setMemberIpAssignments(arr => [...arr]);
            }}
          />
        );
      })}
    </View>
  );
};

据我所知，突变发生恰好一次，因为最初所有内容都引用原始 ipAssignments 数组。不过，在更新状态时，arr => [...arr] 正在为memberIpAssignments 返回一个新数组引用，而对ipAssignments 的引用已损坏。

您确实应该使用功能状态更新来以任何方式“编辑” ip 条目。考虑以下几点：

export default function App() {
  const ipAssignments = ['192.168.0.1', '192.168.1.1'];
  const [memberIpAssignments, setMemberIpAssignments] = React.useState(
    ipAssignments
  );

  return (
    <View>
      {memberIpAssignments.map((eachIpAssignments, index) => {
        return (
          <TextInput
            key={index}
            placeholder={'ipAssignments'}
            keyboardType={'default'}
            value={eachIpAssignments}
            onChangeText={(value) => {
              setMemberIpAssignments((arr) =>
                arr.map((el, i) => (i === index ? value : el))
              );
            }}
          />
        );
      })}
    </View>
  );
}

Expo Snack

【讨论】：