Question

我正在尝试使用平面列表渲染在屏幕上输入的数据，以便滚动选项在我的应用程序上起作用。没有显示任何错误，但数据未呈现。

这是我的代码：

import React, { useState } from 'react';
import { StyleSheet, Text, View, Button, TextInput, ScrollView, FlatList } from 'react-native';

export default function App() {
    const [enteredGoal, setEnteredGoal] = useState('');
    const [courseGoals, setCourseGoals] = useState([]);
    const goalInputHandler = (enteredText) => {
        setEnteredGoal(enteredText);
    };
    const addGoalHandler = () => {
        setCourseGoals(currentGoals => [...courseGoals, { id: Math.random().toString(), value: enteredGoal }]);
    };

    return (
        <View style={styles.screen}>
            <View style={styles.inputContainer}>
                <TextInput placeholder="Course Goal"
                    style={styles.input}
                    onChangeText={goalInputHandler}
                    value={enteredGoal} />
                <Button title="Add" onPress={addGoalHandler} />
            </View>
            <FlatList
                keyExtractor={(item, index) => item.id}
                data={courseGoals} renderItem={itemData => {
                    courseGoals.map((goal) =>
                        <View style={styles.listItem}><Text>{itemData.item.value}</Text></View>)
                }} />

        </View>

    );
}

const styles = StyleSheet.create({
    screen: {
        padding: 50
    },
    inputContainer: { flexDirection: 'row', justifyContent: 'center', alignItems: 'center' },
    input: {
        width: '80%', borderColor: 'black', borderWidth: 1, padding: 10
    }
    , listItem: {
        padding: 10,
        margin: 10,
        backgroundColor: '#ccc',
        borderColor: 'black',
        borderWidth: 1
    }
});

你能帮我吗？

Answer 1

我认为该项目未在exports.handler = function(event, context) { var php = spawn('./php-cgi', ['-v']); var output = ''; php.stdout.on('data', function(data) { output += data.toString('utf-8'); }); php.on('close', function() { context.succeed(output); }); };中正确返回，并且您不需要在其中迭代renderItem，因为它已经绑定到courseGoals。

尝试将您的data更新为此：

renderItem

在react-native

1 个答案: