Javascript 通过在React Native上切换开关组件来更新数组状态内的值

我在React Native With expo中有一个注册组件，可以有多个电子邮件输入，每个输入后面都有一个开关组件，指示这是否是主电子邮件。我使用react-useState来管理字段列表的行为。但当我按下开关切换主属性的值时，开关卡住了，直到我执行本例中的下一个操作时才移动。我创建了一个按钮，在数组中插入一个新项，并创建了另一个虚拟工作开关。但是如果我打印这个值，它会像预期的那样正常切换，但是组件本身不会立即响应。以下是我目前的代码：

 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>
    </>
  );
}

---

任何帮助都将不胜感激

您只需通过像这样扩展以前的数组来创建一个新数组

const setMainEmail = (value, emailIndex) => {
    const array = [...emails];
    console.log(array);
    array[emailIndex].main = value;
    console.log(array);
    setEmails(array);
  };

这就是另一个场景工作而失败的原因，在添加新项目的场景中，您做得很好