React Native useState onChangeText

Question

嗨，我想知道为什么这段代码有效，对不起，sintax 错误，这是一个示例。 我的问题是为什么memberIpAssignments采用ip值？ 如果我没有将ip传递给setMemberIpAssignments(arr =>[...arr])但仍然采用该值并更新 state，我不明白。

setMemberIpAssignments(arr =>[...arr]) ，这个 state 根本不应该改变，因为我没有给出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>
  );
};

Answer 1

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

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数组。 但是，在更新 state 时， arr => [...arr]正在为memberIpAssignments返回一个新的数组引用，返回到ipAssignments的引用已损坏。

您真的应该使用功能性 state 更新来以任何方式“编辑” 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小吃