通过在 React Native 上切换 Switch 组件来更新数组状态中的值

Question

我在 React Native 中有一个 signUp 组件（没有 expo），它可能有多个电子邮件输入，每个组件后面都有一个 Switch 组件，指示这是否是主要电子邮件。我正在使用 react useState 来管理字段列表的行为。但是当我按下开关来切换主属性的值时，Switch卡住了，直到我执行下一个操作才移动（在此示例中，我创建了一个按钮，在数组上插入一个新项，并制作了另一个虚拟工作开关）。但是如果我打印该值，它将按预期正常切换，但组件本身不会立即响应。这是我到目前为止的代码： import React, {useState} from 'react';import {TextInput, View, Text, Switch, Button} from 'react-native';export default function Signup() {  const [isEnabled, setIsEnabled] = useState(false);  const [emails, setEmails] = useState([    {      email: '',      main: true,    },  ]);  const toggleSwitch = () => setIsEnabled(previousState => !previousState);  const setMainEmail = (value, emailIndex) => {    const array = emails;    console.log(array);    array[emailIndex].main = value;    console.log(array);    setEmails(array);  };  const addNewEmail = () => {    setEmails([      ...emails,      {        email: '',        principal: false,      },    ]);  };  return (    <>      <View>        <Text>Dummy Switch That Works</Text>        <Switch          trackColor={{false: '#767577', true: '#767577'}}          thumbColor={isEnabled ? '#FD7E77' : '#f4f3f4'}          ios_backgroundColor="#3e3e3e"          onValueChange={toggleSwitch}          value={isEnabled}        />      </View>      <View>        {emails.map((email, emailIndex) => (          <View key={emailIndex}>            <TextInput              placeholder="Email"              autoCapitalize="none"              keyboardType="email-address"            />            <View>              <Switch                value={email.main}                trackColor={{false: '#767577', true: '#767577'}}                thumbColor={email.main ? '#FD7E77' : '#f4f3f4'}                ios_backgroundColor="#3e3e3e"                onValueChange={event => setMainEmail(event, emailIndex)}              />              <Text color="#fff">Main?</Text>            </View>          </View>        ))}        <Button onPress={addNewEmail} title="+ Email" />      </View>    </>  );}任何帮助将不胜感激！

Answer 1

您只需要通过像这样分散以前的数组来创建新数组

const setMainEmail = (value, emailIndex) => {

    const array = [...emails];

    console.log(array);

    array[emailIndex].main = value;

    console.log(array);

    setEmails(array);

  };

这是另一个方案工作和失败的原因，你在添加新项的方案中做对了。