为数组 React Native 中的每个项目动态渲染组件

Question

这里的初学者问题，不确定到底会考虑什么，但我正在尝试制作一个表单，用户可以在按下按钮时添加和删除输入行。按下“添加”或“删除”按钮时，我需要更改哪些内容才能呈现新组件或删除组件？现在，添加和删除按钮会适当地更改 textInput 数组，但实际上并未添加或删除组件。

这是我当前的代码：

FormScreen.js

import React from 'react';
import { View, StyleSheet, ScrollView } from 'react-native';
import { Button, Caption } from 'react-native-paper';
import InputCard from '../components/InputCard';

const FormScreen = props => {
    const textInput = [1,2,3];

    const addTextInput = () => {
        let currArr = textInput;
        let lastNum = currArr[currArr.length -1]
        let nextNum = lastNum + 1
        console.log(currArr, lastNum, nextNum);
        textInput.push(
            nextNum
        );
        
        console.log(textInput);
    };
    
    const removeTextInput = () => {
        textInput.pop();
        console.log(textInput);
    };

    return (
        <ScrollView>
            <View style={styles.col}>
                <View style={styles.row}>
                    <Caption>Favorite colors?</Caption>
                </View>
                <View style={styles.row}>
                    <View>
                    {textInput.map(key => {
                        return (
                            <InputCard key={key}/>
                        );
                    })}
                    </View>
                </View>
                <View>
                    <View style={styles.col}>
                        <Button title='Add' onPress={() => addTextInput()}>Add</Button>
                    </View>
                    <View style={styles.col}>
                        <Button title='Remove' onPress={() => removeTextInput()}>Remove</Button>
                    </View>
                </View>
            </View>
        </ScrollView>
    );
};

export default FormScreen;

InputCard.js

import React, { useState } from "react";
import { View, StyleSheet } from 'react-native';
import { Caption, Card, TextInput } from "react-native-paper";

const InputCard = (props) => {

    const [input, setInput] = useState('');
    
    return (
        <View>
            <Card>
                <Card.Content>
                    <Caption>Item {props.key}</Caption>
                    <View style={styles.row}>
                        <View style={styles.half}>
                            <TextInput
                                label="Input"
                                value={input}
                                onChangeText={input => setInput(input)}
                                mode="outlined"
                                style={styles.textfield}
                            />
                        </View>
                    </View>
                </Card.Content>
            </Card>
        </View>
    );
}

export default InputCard;

Answer 1

不要将它存储在数组中，而是尝试使用 2 个状态来执行类似的操作。

const [totalTextInput, setTotalTextInput] = useState([])//initial state, set it to any data you want.
const [count, setCount] = useState(0);

const addTextInput = () => {
  
      setCount((prevState) => prevState + 1);
      setTotalTextInput((prevState) => {
        const newTextInput = Array.from(prevState);  // CREATING A NEW ARRAY OBJECT
        newTextInput.push(count);
        return newTextInput;  
      });
    };

const removeTextInput = () => {
  setTotalTextInput((prevState) => {
    const newTextInput = Array.from(prevState);  // CREATING A NEW ARRAY OBJECT
    newTextInput.pop();
    return newTextInput;  
  });
};

在你的代码中：

<View>
      {totalTextInput.map(key => {
           return (
                <InputCard key={key}/>
            );
       })}
</View>