找不到变量：initialState。我正在尝试为 REACT NATIVE 中的每个数组项映射一个数组并显示组件

Question

这是一个关于 react native 的问题。我正在尝试使用 map 方法渲染子组件。加载页面时应用程序崩溃并且我收到此错误。

这是父组件

<ScrollView>
                <View
                    style={{
                        flexDirection: 'row',
                        flexWrap: 'wrap',
                        justifyContent: 'space-around'
                    }}>
                    {items.length !== 0 ? (
                        <View>
                            {items.map(item => (
                                <SingleCard
                                    item={item}
                                    navigation={navigation}
                                    key={Math.random()}
                                />
                            ))}
                        </View>
                    ) : (
                        <Text style={{ paddingTop: 100, fontSize: 25, color: 'black' }}>
                            Please add a machine first
                        </Text>
                    )}
                </View>
            </ScrollView>

这是我试图渲染的子组件（SingleCard）

const SingleCard = ({ navigation, item }) => {
const macname = item.machinename;

const [loading, setloading] = useState(false);
const [tokenin, settokenin] = useState('');
const [tokenout, settokenout] = useState('');
const [date, setdate] = useState(initialState);

useEffect(() => {
    getData();
}, []);

const getData = async () => {
    try {
        setloading(true);
        db1.transaction(tx => {
            tx.executeSql(
                'SELECT * FROM data WHERE machinename = ? ORDER BY _id DESC LIMIT 1',
                [macname],
                (_, results) => {
                    if (results.rows.length == 0) {
                        setloading(true);
                    } else {
                        console.log(results);
                        settokenin(results.rows.item(0).tokenin);
                        settokenout(results.rows.item(0).tokenout);
                        setdate(results.rows.item(0).date);
                    }
                }
            );
        });
    } catch (err) {
        console.log(err);
    }
};

const onPress = (id, machinename) => {
    console.log(id);
    navigation.navigate('Update', { id, machinename });
};

const deletealert = (id, machinename) => {
    Alert.alert(
        'Are you sure?',
        'Deleting the machine will also delete all the data updated by you for this machine ',
        [
            {
                text: 'Cancel',
                onPress: () => console.log('cancel'),
                style: 'cancel'
            },
            {
                text: 'Iam sure',
                style: 'default',
                onPress: async () => {
                    // await setbool(true);
                    // console.log(`into timeout ${bool}`);
                    deletemachine(id, machinename);
                    // setbool(false);
                    setrefresh(!refresh);
                }
            }
        ]
    );
};

const deletemachine = (id, machinename) => {
    // console.log(`into deletemachine ${bool}`);
    // if (bool) {
    db.transaction(tx => {
        tx.executeSql('DELETE FROM machines where _id=?', [id], (tx, result) => {
            console.log('Deleted machine...');
        });
        // setrefresh(!refresh);
    });

    db1.transaction(tx => {
        tx.executeSql(
            'DELETE FROM data where machinename=?',
            [machinename],
            (tx, result) => {
                console.log('Deleted machine data...');
            }
        );
    });
    // }
};
return (
    <View
        style={{
            // margin: 10,
            alignItems: 'center',
            flexDirection: 'row',
            justifyContent: 'space-between',
            flexWrap: 'wrap'
        }}>
        {/* <View>
                                    <Text>Name of the machine: {item.machinename}</Text>
                                    <Text>Id of the machine: {item._id}</Text>
                                    <Text>details of the machine: this is a vr machine</Text>
                                </View> */}
        <Card
            containerStyle={{
                shadowOffset: { width: 0, height: 1 },
                shadowOpacity: 0.1,
                shadowRadius: 20,
                shadowColor: 'black',
                elevation: 8,
                width: '97%'
                // marginLeft: 100
            }}>
            <Card.Title
                style={{
                    flexDirection: 'row'
                }}>
                {item.machinename}
            </Card.Title>
            <Card.Divider />
            <Text>Id: {item._id}</Text>

            <Text style={{ paddingVertical: 10 }}>Details:</Text>

            <View
                style={{
                    paddingTop: 50,
                    flexDirection: 'row',
                    justifyContent: 'space-between'
                }}>
                <Button
                    type='outline'
                    buttonStyle={{
                        width: 100,
                        //backgroundColor: 'darkgrey',
                        // borderColor: 'red',
                        borderRadius: 10,
                        marginLeft: 0,
                        marginRight: 0,
                        marginBottom: 0
                    }}
                    onPress={() => deletealert(item._id, item.machinename)}
                    title='Delete'
                />
                <Button
                    buttonStyle={{
                        width: 150,
                        height: 50,
                        borderRadius: 10,
                        marginLeft: 0,
                        marginRight: 0,
                        marginBottom: 0
                    }}
                    onPress={() => {
                        onPress(item._id, item.machinename);
                    }}
                    title='Add tokens'
                />
            </View>
        </Card>
    </View>
);

};

这是我单击加载此组件的页面后收到的错误消息。

Answer 1

你没有声明initialState。另外，我相信当你使用快捷方式创建时它是默认的：const [date,setDate] = useState(initialState);你需要通过输入一个值来初始化。

例如，const [count,setCount] = useState(0);