javascript - 如何在 React 中访问和更新对象数组中的字段？

Question

我正在尝试填写输入数组中的“ans”字段，但是当我输入其中一个输入时，它会覆盖该状态中的所有其他对象。当我以正确的方式在其中一个输入中键入内容时，如何更新对象数组中的“ans”字段，而不会覆盖状态内数组中的其他对象？

我的代码：

import React, { useState } from "react";
import {
  StyleSheet,
  View,
  Text,
  KeyboardAvoidingView,
  ScrollView,
  TextInput,
  Button,
} from "react-native";


export default function List({ navigation }) {
    const [data, setData] = useState({
      "creator": {
        "creatorAuthor": "Alisson",
        "user": "",
      },
      "customField": [
        {
          "ans": "",
          "quests": "Quest 1",
        },
        {
          "ans": "",
          "quests": "Quest 2",
        },
        {
          "ans": "",
          "quests": "Quest 3",
        },
      ],
      "date": {
        "dateCreator": "01/01/2021",
        "dateUser": "",
      },
      "id": "-MQxtMmc_K7rDIgutcNC",
      "title": "Google",
    }
    );
    

  return (
    <KeyboardAvoidingView style={{backgroundColor: 'white', flex: 1}} enabled>
                
                <ScrollView contentContainerStyle={{ padding: 10 }}>
                        <View>
                            <Text>{data.title}</Text>
                        </View>

                        <View>
                                <Text>{ data.creator.creatorAuthor}</Text>
                                <TextInput 
                                    style={{marginBottom: 20}}
                                    placeholderTextColor= '#808080'
                                    value={data.creator.user}
                                    onChangeText={value => setData({ ...data, creator: {...data.creator, user: value} })}
                                    placeholder='Usuário'
                                    multiline={true}
                                />
                        </View>

                        <View>
                            <Text>{data.date.dateCreator}</Text>
                                <TextInput
                                    style={{marginBottom: 20}}
                                    placeholderTextColor= '#808080'
                                    value={data.date.dateUser}
                                    onChangeText={value => setData({ ...data, date: {...data.date, dateUser: value} })}
                                    placeholder='Data das repostas'
                                />
                    </View>

                    {
                        data.customField.map((q, id) => (
                            <View key={id}>
                                <Text>{q.quests}</Text>
                                <TextInput
                                    style={{marginBottom: 20}}
                                    placeholderTextColor= '#808080'
                                    value={q.ans}
                                    onChangeText={value => setData({ ...data, customField: [{...q, ans: value}] })}
                                    placeholder='Resposta'
                                    multiline={true}
                                />
                            </View>
                            

                        ))
                    }

                    
                        <Button
                            title='Salvar'
                            onPress={() => {}}
                        />
                    
                        
                </ScrollView>
        </KeyboardAvoidingView>
  );
}

标签： javascriptreactjsreact-nativereact-hooks

Answer 1

这只会产生一个包含一个值的数组：

onChangeText={value => setData({ ...data, customField: [{...q, ans: value}] })}

您必须复制原始数组并替换要更新的值：

onChangeText={value => setData({ ...data, customField: [data.customField.filter(cf => cf.quests !== q), {...q, ans: value}] })}

我没有测试语法，但应该是这样的。

我建议将数据拆分为多个状态字段，因为它可以让您使用更简单的语法，并且您所做的事情会更加明显：

const [customField, setCustomField] = useState({ -your custom field data here-});

{
    customField.map((q, id) => (
        <View key={id}>
        <Text>{q.quests}</Text>
        <TextInput
            style={{marginBottom: 20}}
            placeholderTextColor= '#808080'
            value={q.ans}
            onChangeText={value => setCustomField([ customField.filter(cf => cf.quests !== q), {...q, ans: value}]}
            placeholder='Resposta'
            multiline={true}
        />
        </View>                    
   ))
}