如何使用数组函数从模态输入中获取对象数据到主页来制作联系人列表？

Question

我是这个领域的新手，想学习React Native编码来开发移动应用程序。

我想用 React Native 开发一个联系人列表 在主页中，我放置了一个 (+) 按钮来切换/打开带有文本输入框的模态框，并放置了一个提交按钮来关闭。 将我的文本输入放入输入框（姓名、电子邮件和电话）后，单击提交按钮，模态框将关闭，但文本输入对象数据不会出现在主页中。 我想使用数组函数将文本输入对象数据作为总联系人列表带到主页，我尝试通过模态文本输入传递该对象数据。

模态框已正确关闭，但文本输入对象数据未传递到我想要获取的主页。 我尝试将我的代码粘贴到此处，但系统不接受每次都给出错误。

AddContactOne.js

import { Image, Modal, StyleSheet, Text, TouchableOpacity, View } from 'react-native'
import React, { useState } from 'react'
import Input from '../../components/Input'


const AddContactOne = () => {

  const [name, setName] = useState([]);
  const [email, setEmail] = useState([]);
  const [phone, setPhone] = useState([]);
  const [modalVisible, setModalVisible] = useState(false);
  const toggleModal = () => { setModalVisible(!modalVisible); };

  return (

    <View style={styles.container}>
      <Text style={styles.txt1}>Contact List</Text>
      <TouchableOpacity
        onPress={(v) => toggleModal(v)}
        style={{
          height: 50,
          width: 50,
          backgroundColor: 'white',
          position: 'absolute',
          bottom: 30,
          right: 30,
          borderRadius: 30,
          shadowColor: 'black',
          elevation: 8,
          alignItems: 'center',
          justifyContent: 'center'
        }}>
        <Image
          source={{
            uri: 'https://cdn-icons-png.flaticon.com/128/748/748113.png',
          }}
          style={{
            height: 30,
            width: 30,
          }}
        />
        <Modal
          animationType="slide"
          transparent={true}
          visible={modalVisible}
          onRequestClose={toggleModal}>
          <View
            style={{
              height: 320,
              width: '85%',
              borderRadius: 10,
              alignSelf: 'center',
              alignContent: 'center',
              justifyContent: 'center',
              marginTop: 150,
              backgroundColor: "blue",
            }}>
            <Text style={styles.txt2}>Add Contact</Text>
            <Input
              value={name}
              placeholder={'Enter Name'}
              placeholderTextColor={'white'}
              marginTop={10}
              onChangeText={v => setName(v)}
            />
            <Input
              value={email}
              placeholder={'Enter Email'}
              placeholderTextColor={'white'}
              marginTop={10}
              onChangeText={v => setEmail(v)}
            />
            <Input
              value={phone}
              placeholder={'Enter Phone Number'}
              placeholderTextColor={'white'}
              marginTop={10}
              onChangeText={v => setPhone(v)}
            />
            <TouchableOpacity
              style={{
                backgroundColor: 'white',
                alignItems: 'center',
                justifyContent: 'center',
                height: 50,
                margin: 20,
                borderRadius: 10,
              }}

              // onPress= {() => {
              //   setModalVisible(false)
              //   props?.navigation?.navigate('AddContactOne', {
              //         name: name,
              //         email: email,
              //           phone: phone
              //       })} 
              //     }
              onPress={toggleModal}
              name={(v) => setName(v)}
              email={(v) => setEmail(v)}
              phone={(v) => setPhone(v)}
            >
              <Text style={{
                color: 'black',
                fontSize: 20,
              }}>Submit</Text>
            </TouchableOpacity>
          </View>
        </Modal>
      </TouchableOpacity>
    </View>
  )
}

export default AddContactOne

const styles = StyleSheet.create({
  container: {
    flex: 1,
    flexDirection: 'column',
    backgroundColor: 'white',
    width: '100%',
    alignContent: 'center',
    alignItems: 'center',
    marginTop: 20,
  },
  txt1: {
    fontSize: 25,
    fontWeight: '400'
  },
  txt2: {
    fontSize: 20,
    fontWeight: '350',
    textAlign: 'center',
    marginBottom: 6

  }

})




App.js


import { SafeAreaView } from 'react-native'
import React from 'react'
import Task from './src/screens/main/Task';
import AddContact from './src/screens/main/AddContact';
import AddContactOne from './src/screens/main/AddContactOne';
import AddContactTwo from './src/screens/main/AddContactTwo';


const App = () => {
  return (
    // <Welcome /> 
    // <SignUp/>
    // <Task/>
    // <AddContact/>
    <AddContactOne/>
    // <AddContactTwo/>
  )
}

export default App

Answer 1

我发现您遇到了问题。

据我所知，问题似乎是您没有正确渲染存储在状态中的数据。此外，我注意到您正在使用

name

、

email

和

phone

的数组，但这些应该是单独的状态，因为它们保存单个值，而不是数组。

您应该为

name

、

email

和

phone

（作为字符串）创建单独的状态，以及另一个状态来保存整个联系人列表。我还尝试通过进行这些更改并添加一些样式以提高可见性来解决您的问题。

这是代码的更新版本：

import React, { useState } from 'react';
import {
  Image,
  Modal,
  StyleSheet,
  Text,
  TextInput,
  TouchableOpacity,
  View,
} from 'react-native';

const AddContactOne = () => {
  const [name, setName] = useState('');
  const [email, setEmail] = useState('');
  const [phone, setPhone] = useState('');
  const [contacts, setContacts] = useState([]);

  const [modalVisible, setModalVisible] = useState(false);
  const toggleModal = () => {
    setModalVisible(!modalVisible);
  };

  const addContact = () => {
    const contact = {
      name: name,
      email: email,
      phone: phone,
    };
    setContacts([...contacts, contact]);
    setName('');
    setEmail('');
    setPhone('');
    toggleModal();
  };

  return (
    <View style={styles.container}>
      <Text style={styles.txt1}>Contact List</Text>
      {contacts.map((contact, index) => (
        <View
          key={index}
          style={{
            width: '100%',
            marginTop: 10,
            padding: 10,
            borderWidth: 1,
          }}>
          <Text style={styles.txt}>{contact.name}</Text>
          <Text style={styles.txt}>{contact.email}</Text>
          <Text style={styles.txt}>{contact.phone}</Text>
        </View>
      ))}
      <TouchableOpacity
        onPress={toggleModal}
        style={{
          height: 50,
          width: 50,
          backgroundColor: 'white',
          position: 'absolute',
          bottom: 30,
          right: 30,
          borderRadius: 30,
          shadowColor: 'black',
          elevation: 8,
          alignItems: 'center',
          justifyContent: 'center',
        }}>
        <Image
          source={{
            uri: 'https://cdn-icons-png.flaticon.com/128/748/748113.png',
          }}
          style={{
            height: 30,
            width: 30,
          }}
        />
        <Modal
          animationType="slide"
          transparent={true}
          visible={modalVisible}
          onRequestClose={toggleModal}>
          <View
            style={{
              height: 320,
              width: '85%',
              borderRadius: 10,
              alignSelf: 'center',
              alignContent: 'center',
              justifyContent: 'center',
              marginTop: 150,
              backgroundColor: 'blue',
            }}>
            <Text style={styles.txt2}>Add Contact</Text>
            <TextInput
              value={name}
              placeholder={'Enter Name'}
              placeholderTextColor={'white'}
              marginTop={10}
              onChangeText={setName}
            />
            <TextInput
              value={email}
              placeholder={'Enter Email'}
              placeholderTextColor={'white'}
              marginTop={10}
              onChangeText={setEmail}
            />
            <TextInput
              value={phone}
              placeholder={'Enter Phone Number'}
              placeholderTextColor={'white'}
              marginTop={10}
              onChangeText={setPhone}
            />
            <TouchableOpacity
              style={{
                backgroundColor: 'white',
                alignItems: 'center',
                justifyContent: 'center',
                height: 50,
                margin: 20,
                borderRadius: 10,
              }}
              onPress={addContact}>
              <Text
                style={{
                  color: 'black',
                  fontSize: 20,
                }}>
                Submit
              </Text>
            </TouchableOpacity>
          </View>
        </Modal>
      </TouchableOpacity>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    flexDirection: 'column',
    backgroundColor: 'white',
    alignContent: 'center',
    alignItems: 'center',
    marginTop: 20,
    paddingHorizontal: 20,
  },
  txt1: {
    fontSize: 25,
    fontWeight: '400',
    color: 'black',
  },
  txt2: {
    fontSize: 20,
    fontWeight: '350',
    textAlign: 'center',
    marginBottom: 6,
  },
  txt: {
    fontSize: 20,
    fontWeight: '400',
    color: 'black',
  },
});

const App = () => {
  return <AddContactOne />;
};

export default App;