Question

我正在尝试通过textinput将项目添加到清单中。目前我只能添加一个项目，当我尝试添加第二个项目时，它只是更新了第一项目，尽管来自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

GeneralPredicates predicate mismatch, reason: node(s) didn't match node selector在重新渲染组件后始终为空数组，您应将以前的arrayHolder与新项连接起来：

listItems

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

1 个答案: