動態形式的未定義屬性

新手問題，我得到了TypeError: Cannot read properties of undefined (reading 'id')以下代碼。我是否正確傳遞了道具？為什么這個值是未定義的？我的getValues按鈕回傳一個length屬性為 0 的空串列，那么為什么在創建并傳遞給子組件時它是未定義的？

InputScreen.js

import React, { useState } from 'react';
import { v4 as uuidv4 } from 'uuid';
import { View, StyleSheet, ScrollView, FlatList } from 'react-native';
import { Button, Caption } from 'react-native-paper';
import InputCard from '../components/InputCard';

const InputScreen = props => {
    const [formState, setFormState] = useState([]);
    
    const addInput = () => {      
        setFormState([
            ...formState,
            {
                id: formState.length,
                substance: "",
                amount: "",
                measure: ""
            },
        ]);
    };

    const handleInputChange = (index, newStateForIndex) => {
        let newFormState = [...formState];
        setFormState([
            ...newStateForIndex.slice(0,index),
            newStateForIndex,
            ...newStateForIndex.slice(index 1)
        ]);
    };
    
    const removeLastInput = () => {
        if (formState.length > 0) {
            const lastindex = formState.length - 1;
            setFormState(formState.filter((item, index) => index !== lastindex));  
        }
    };

    const getValues = () => {
        console.log('Form State: ',formState,'Length: ',formState.length);
    };

    return (
        <ScrollView>
            <View style={styles.col}>
                <View style={styles.row}>
                    <Caption>What substances are you checking out?</Caption>
                </View>
                <View style={styles.row}>
                    <View>
                        {formState.map((state, i) => 
                            <InputCard
                                key={uuidv4()}
                                formState={state[i]}
                                handleChange={handleInputChange}
                            />
                        )}
                    </View>
                </View>
                <View>
                    <View style={styles.col}>
                        <Button title='Add' onPress={addInput}>Add</Button>
                    </View>
                    <View style={styles.col}>
                        <Button title='Remove' onPress={removeLastInput}>Remove</Button>
                    </View>
                    <View style={styles.col}>
                        <Button title='GetVals' onPress={getValues}>Get Values</Button>
                    </View>
                </View>
            </View>
        </ScrollView>
    );
};

export default InputScreen;

輸入卡.js

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

const InputCard = ({ formState, handleChange }) => {
    
    const id = formState.id; // <- Error occurs here
    
    return (
        <View>
            <Card>
                <Card.Content>
                    <Caption>Item {id}</Caption>
                    <View style={styles.row}>
                        <View style={styles.half}>
                            <TextInput
                                label="substance"
                                value={formState.substance}
                                onChangeText={(event) => {
                                    handleChange(
                                        id,
                                        {
                                            ...formState,
                                            substance: event.target.value
                                        });
                                }} // change needs to be made from here to parent
                                mode="outlined"
                                right={<TextInput.Icon name="pill" />}
                                style={styles.textfield}
                            />
                        </View>
                        <View style={styles.quarter}>
                            <TextInput
                                label="amount"
                                value={formState.amount}
                                onChangeText={(event) => {
                                    handleChange(
                                        id,
                                        {
                                            ...formState,
                                            substance: event.target.value
                                        });
                                }}
                                mode="outlined"
                                keyboardType="number-pad"
                            />
                        </View>
                        <View style={styles.quarterlast}>
                            <TextInput
                                label="measure"
                                value={formState.measure}
                                onChangeText={(event) => {
                                    handleChange(
                                        id,
                                        {
                                            ...formState,
                                            substance: event.target.value
                                        });
                                }}
                                mode="outlined"
                            />
                        </View>
                    </View>
                </Card.Content>
            </Card>
        </View>
    );
};

export default InputCard;

uj5u.com熱心網友回復：

你formState代表一個包含物件的陣列，所以在回圈中，你的第一個引數是該陣列的一個元素，它是一個物件，你不需要為它使用索引。

<View>
  {formState.map((state, i) => 
     <InputCard
       key={uuidv4()}
       formState={state} // <- pass state instead of state[i]
       handleChange={handleInputChange}
      />
  )}
</View>

標籤：

上一篇：ReactNative中的TextInput回傳型別

下一篇：即使在使用clearInterval()清除setInterval()后，它也會繼續運行