Компонент FlatList, поддерживающий React, не работает

Question

Здравствуйте, я новичок в react-native. Я практиковался с приложением basi c, которое считывает ввод от пользователя и отображает его на экране. Я пытаюсь использовать FlatList, но он не отображается. Вот мой код

    export default function App() {
      const [enteredText, setEnteredText] = useState(
        ""
      ); /* constant and method  with String*/

      const [enteredString, setEnteredString] = useState(
        []
      ); /* constant and method  with Array  */

      const enteredTextHandler = (enteredText) => {
        setEnteredText(enteredText);
      }; /* Set the entered text to the constant value*/

      const addTextHandler = () => {
        setEnteredString((currentString) => [
          ...currentString,
          { id: Math.random().toString(), value: enteredText },
       ]); /*  Add entered text to the array */
      };

      return (
        <View style={styles.mainView}>
          <View style={styles.container}>
            <TextInput
              placeholder="Enter te value"
              style={styles.input}
              onChangeText={enteredTextHandler}
              value={enteredText}
            />
            <Button title="Add" onPress={addTextHandler} style={styles.button} />
          </View>
          <FlatList
            data={enteredString}
            keyExtractor={(item) => item.id}
            renderItem={(itemData) => {
              console.log(itemData.item.value);
              <View style={styles.listStyle}>
                <Text>{itemData.item.value}</Text>
              </View>;
            }}
          />
        </View>
      );
    }

Answer 1

Получил ответ

 <FlatList
    data={enteredString}
    keyExtractor={(item, index) => item.id}
    renderItem={(itemData) => (
      <View style={styles.listStyle}>
        <Text>{itemData.item.value}</Text>
      </View>
    )}
  />

Синтаксис написан неправильно. ранее я использовал (itemData) => {} , но фактический синтаксис - (itemData) => () . Вместо парантеза я использовал фигурные скобки, поэтому он не отображался.

Answer 2

Это может быть потому, что вы повторно использовали имя переменной enteredText в своем enteredTextHandler. Я думаю, что при его настройке он всегда будет пустым для inputText.

Попробуйте использовать другое имя для текстового аргумента:

const enteredTextHandler = newText => {
    setEnteredText(newText);
  }; /* Set the entered text to the constant value*/