如何使用 textinput 将多个项目添加到平面列表？

Question

我正在尝试通过文本输入将项目添加到平面列表。目前我只能添加一个项目，当我尝试添加第二个项目时，它只会更新第一个项目，尽管来自 textinput 的数据应该出现在前一个 textinput 的下方。我发现了一些类似问题的实例，我知道我可能需要在我的代码中添加一些东西，但我就是不知道是什么。下面是我的代码。我将不胜感激任何帮助:)

function FlatlistComponent({ }) {

    const listItems = [];
    const [arrayHolder, setArrayHolder] = React.useState([]);
    const [textInputHolder, setTextInputHolder] = React.useState('');

    useEffect(() => {
        setArrayHolder(listItems)
      }, [])

    const joinData = () => {
        listItems.push({ name : textInputHolder });
        setArrayHolder(listItems);
    }

    const FlatListItemSeparator = () => {
        return (
            <View
                style={{
                height: 1,
                width: "95%",
                backgroundColor: '#00678A',
                alignSelf: 'center'
                }} />
        );
    }

    // Delete note
    deleteNote = id => () => {
      const filteredData = arrayHolder.filter(item => item.id !== id);
      setArrayHolder({ data: filteredData });
    }

    return (
        <View style={styles.MainContainer}>

          <FlatList
            data={arrayHolder}
            width='100%'
            extraData={arrayHolder}
            keyExtractor={(item) => item.id}
            ItemSeparatorComponent={FlatListItemSeparator}
            renderItem={({ item }) => <Text style={styles.item} onPress={deleteNote(item.id)}> {item.name} </Text>}
          />

          <TextInput
            placeholder='Kirjoita uusi'
            onChangeText={data => setTextInputHolder(data)}
            style={styles.textInputStyle}
            underlineColorAndroid='transparent'
            clearTextOnFocus={true}
            value={listItems}
          />

          <TouchableOpacity onPress={joinData} style={styles.button} >
            <Text style={styles.buttonText}> + </Text>
          </TouchableOpacity>

        </View>
    );
}

Answer 1

listItems 在组件重新渲染后总是一个空数组，你应该将之前的 arrayHolder 与新的项目连接起来：

const joinData = () => {
  setArrayHolder([... arrayHolder, {name: textInputHolder }]);
  // or use update function
  // setArrayHolder(prev => [...prev, {name: textInputHolder }]);
}