Javascript 当将新值放入输入字段时，会擦除上一个值

使用当前代码，我有两个输入字段和一个下拉菜单。在字段中放置或修改任何值时，都会清除其余字段。唯一保持一致的是下拉菜单。我怀疑我的useEffect挂钩可能在做什么，但我很不确定为什么。任何建议都很好。 （仅供参考：storeArtic是firebase的推手）

CustomScreen.js

import React, { useState } from "react";
import { StyleSheet, Text, Keyboard, View, TouchableWithoutFeedback } from "react-native";
import { Button, Input } from "react-native-elements";
import { Dropdown } from "react-native-material-dropdown";
import { storeArtic } from '../helpers/fb-settings';

const CustomScreen = ({ route, navigation }) =>{
    //create a screen with the ability to add a picture with text to the deck of artic cards
    //add check box solution for selection of word type (maybe bubbles, ask about this)
    const articDrop = [
        {value: 'CV'},
        {value: 'VC'},
        {value: 'VV'},
        {value: 'VCV'},
        {value: 'CVCV'},
        {value: 'C1V1C1V2'},
        {value: 'C1V1C2V2'},
    ];

    const [articCard, setCard] = useState({
        word: '',
        imageUrl: '',
        aType:'',
        cType: '',
        mastery: false
    })

    return(
        <TouchableWithoutFeedback onPress={Keyboard.dismiss}>
            <View>
                <Text>Please enter the information of your custom card!</Text>
                <Input
                    placeholder="Enter valid image url"
                    value={articCard.imageUrl}
                    autoCorrect={false}
                    onChangeText={(val) => setCard({ imageUrl: val })}
                />        
                <Input
                    placeholder="Enter word or phrase"
                    value={articCard.word}
                    autoCorrect={false}
                    onChangeText={(val) => 
                        setCard({ word: val, aType: val.charAt(0).toUpperCase(), mastery: false})
                    }
                />
                <Dropdown
                    value={articCard.cType}
                    onChangeText={(text) => setCard({cType: text})}
                    label="Artic Type"
                    data={articDrop}
                />
                <Button
                //this will save the cards to the database
                    title="Save"
                    onPress={() => {
                        storeArtic({articCard})
                    }} 
                />
                <Button
                    title="Clear"
                    onPress={() => {
                        setCard({word: '', aType: '', cType: '', imageUrl: '', mastery: false});
                        navigation.navigate('Home');
                    }}
                />
            </View>
        </TouchableWithoutFeedback>
    )
}


export default CustomScreen;

import React，{useState}来自“React”；
从“react native”导入{样式表、文本、键盘、视图、可触摸且无反馈}；
从“react native elements”导入{Button，Input}；
从“react native material Dropdown”导入{Dropdown}；
从“../helpers/fb settings”导入{storeArtic}；
const CustomScreen=（{route，navigation}）=>{
//创建一个屏幕，能够将带有文本的图片添加到artic卡组中
//添加用于选择单词类型的复选框解决方案（可能是气泡，询问此问题）
常数=[
{value:'CV'}，
{value:'VC'}，
{value:'VV'}，
{value:'VCV'}，
{value:'CVCV'}，
{value:'C1V1C1V2'}，
{value:'C1V1C2V2'}，
];
const[articCard，setCard]=使用状态({
字：''，
imageUrl:“”，
类型：“”，
cType:“”，
掌握：错误
})
返回(
请输入您的自定义卡信息！
setCard（{imageUrl:val}）}
/>        
setCard（{word:val，aType:val.charAt（0）.toUpperCase（），mastery:false}）
}
/>
setCard（{cType:text}）}
label=“Artic类型”
数据={articDrop}
/>
{
storeArtic（{articCard}）
}} 
/>
{
setCard（{word:''，aType:''，cType:''，imageUrl:''，mastery:false}）；
导航。导航（“主页”）；
}}
/>
)
}
导出默认自定义屏幕；

HomeScreen.js

import React, { useState, useEffect } from "react";
import { StyleSheet, Text, Keyboard, TouchableOpacity, View, TouchableWithoutFeedback, Image } from "react-native";
import { Button } from "react-native-elements";
import { Feather } from "@expo/vector-icons";
import { initArticDB, setupArticListener } from '../helpers/fb-settings';


const HomeScreen = ({route, navigation}) => {
  const [ initialDeck, setInitialDeck] = useState([]);

  useEffect(() => {
    try {
      initArticDB();
    } catch (err) {
      console.log(err);
    }
    setupArticListener((items) => {
      setInitialDeck(items);
    });
  }, []);

  useEffect(() => {
    if(route.params?.articCard){
      setCard({imageUrl: state.imageUrl, word: state.word, aType: state.aType, cType: state.cType, mastery: state.mastery})
    }
  }, [route.params?.articType] );


  navigation.setOptions({
        headerRight: () => (
          <TouchableOpacity
            onPress={() =>
              navigation.navigate('Settings')
            }
          >
            <Feather
              style={styles.headerButton}
              name="settings"
              size={24}
              color="#fff"
            />
          </TouchableOpacity>
        ),
        headerLeft: () => (
          <TouchableOpacity
            onPress={() =>
              navigation.navigate('About')
            }
          >
            <Text style={styles.headerButton}> About </Text>
          </TouchableOpacity>
        ),
      });

    return(
      <TouchableWithoutFeedback onPress={Keyboard.dismiss}>
        <View style={styles.container}>
          <Text style={styles.textmenu}>Welcome to Artic Cards</Text>
          <Text style={styles.textsubmenu}>Press Start to Begin!</Text>
          <Image source={require('../assets/5-snowflake-png-image.png')}
            style={{width: 300, height: 300, alignSelf: 'center'}}/>
          <Button
            title="Start"
            style={styles.buttons}
            onPress={() => navigation.navigate('Cards',
            {passDeck: initialDeck})}
          />
          <Button
            title="Progress"
            style={styles.buttons}
            onPress={() => navigation.navigate('Progress')}
          />
          <Button
            title="Customize"
            style={styles.buttons}
            onPress={() => navigation.navigate('Customize')}
          />
        </View>
      </TouchableWithoutFeedback>
    );
};

const styles = StyleSheet.create({
  container: {
    padding: 10,
    backgroundColor: '#E8EAF6',
    flex: 1,
    justifyContent: 'center'
  },
  textmenu: {
    textAlign: 'center',
    fontSize: 30
  },
  textsubmenu:{
    textAlign: 'center',
    fontSize: 15
  },
  headerButton: {
    color: '#fff',
    fontWeight: 'bold',
    margin: 10,
  },
  buttons: {
    padding: 10,
  },
  inputError: {
    color: 'red',
  },
  input: {
    padding: 10,
  },
  resultsGrid: {
    borderColor: '#000',
    borderWidth: 1,
  },
  resultsRow: {
    flexDirection: 'row',
    borderColor: '#000',
    borderBottomWidth: 1,
  },
  resultsLabelContainer: {
    borderRightWidth: 1,
    borderRightColor: '#000',
    flex: 1,
  },
  resultsLabelText: {
    fontWeight: 'bold',
    fontSize: 20,
    padding: 10,
  },
  resultsValueText: {
    fontWeight: 'bold',
    fontSize: 20,
    flex: 1,
    padding: 10,
  },
});

export default HomeScreen;

import React，{useState，useffect}来自“React”；
从“react native”导入{样式表、文本、键盘、触摸不透明度、视图、触摸不带反馈、图像}；
从“react native elements”导入{Button}；
从“@expo/vector icons”导入{Feather}”；
从“../helpers/fb settings”导入{initArticDB，setuparticstener}；
常量主屏幕=（{route，navigation}）=>{
const[initialDeck，setInitialDeck]=useState（[]）；
useffect（（）=>{
试一试{
initDB（）；
}捕捉（错误）{
控制台日志（err）；
}
setupArticListener（（项目）=>{
一组（项目）；
});
}, []);
useffect（（）=>{
if（路由参数？.articCard）{
setCard（{imageUrl:state.imageUrl，word:state.word，aType:state.aType，cType:state.cType，mastery:state.mastery}）
}
}，[route.params？articType]）；
navigation.setOptions({
头灯：（）=>(
navigation.navigate（'Settings'））
}
>
),
标题左侧：（）=>(
navigation.navigate（'About'））
}
>
关于
),
});
返回(
欢迎来到艺术卡
按“开始”开始！
导航。导航（'卡片'，
{passDeck:initialDeck}}
/>
navigation.navigate（'Progress'）}
/>
导航。导航（'Customize'）}
/>
);
};
const styles=StyleSheet.create({
容器：{
填充：10，
背景颜色：“#E8EAF6”，
弹性：1，
为内容辩护：“中心”
},
文本菜单：{
textAlign:'中心'，
尺寸：30
},
文本子菜单：{
textAlign:'中心'，
尺寸：15
},
头部按钮：{
颜色：“#fff”，
fontWeight:'粗体'，
差额：10，
},
按钮：{
填充：10，
},
输入者：{
颜色：“红色”，
},
输入：{
填充：10，
},
结果网格：{
边框颜色：“#000”，
边框宽度：1，
},
结果行：{
flexDirection:'行'，
边框颜色：“#000”，
边界宽度：1，
},
结果标签容器：{
borderRightWidth:1，
borderRightColor:“#000”，
弹性：1，
},
结果标签文本：{
fontWeight:'粗体'，
尺寸：20，
填充：10，
},
结果值文本：{
fontWeight:'粗体'，
尺寸：20，
弹性：1，
填充：10，
},
});
导出默认主屏幕；

与基于类的

setState

不同，当您执行setState时，它会使用您在setState函数中提供的内容覆盖状态。我们有责任修改州政府（而不是过度授权）

所以，若您的状态是一个对象，那个么使用回调方法，扩展以前的状态，然后更新新状态

像这样

setCard（prev=>（{…prev，imageUrl:val}））}//

对您的所有输入执行相同的操作。

awesome:）。。很高兴听到。。。请考虑接受答案…谢谢。