如何將輸入字段添加到 React Native 的列表中？

Question

我是 React Native 的初學者，正在努力通過單擊按鈕將輸入（搜索欄）添加到列表中。 這是我的代碼：

import React, { useState } from "react";
import {
    View,
    Text,
    Button,
    FlatList
} from 'react-native'
import InputDemo from '../components/InputDemo'

const INCREMENT = 1;

class AddInputDemo extends React.Component{
    constructor(props){
        super(props);
        this.state={
            counter: 0,
            numOfInput: [0]
        }
        this.addInput = this.addInput.bind(this)
    }

    addInput(){
        this.setState((state) => ({
            counter: state.counter + INCREMENT,
            numOfInput: [...state.numOfInput, state.counter]
        }))

        console.log(this.state.counter);
        console.log(this.state.numOfInput);



    }
    render(){
        return(
            <View style={{flex: 1, justifyContent: 'center', alignItems: 'center'}}>
                <FlatList
                    data={this.state.numOfInput}
                    keyExtractor={(item, index) => item.id}
                    renderItem={itemData => {
                        <InputDemo/>
                    }}
                />
                <Button title='Add a location' onPress={this.addInput} />

            </View>
        );
    }

}

export default AddInputDemo;

這是InputDemo文件：

import * as React from 'react'
import {
    View,
    Text,
    TextInput,
    Button
} from 'react-native'

const InputDemo = props => {
    return(
        <View style={{borderColor: 'black', borderWidth: 1}}>
            <TextInput
                placeholder='Search'
            />
        </View>
    )
}

export default InputDemo;

這很奇怪，因為我在Functional Component對 state 使用了相同的邏輯。 有用。 但是當應用於Class Component ，當我單擊該按鈕時它不會顯示任何內容。

謝謝你的幫助 ！！！

編輯我嘗試使用 extraData：

<FlatList
                    extraData={this.state.numOfInput}
                    keyExtractor={(item, index) => item.id}
                    renderItem={itemData => {
                        <InputDemo
                            id={itemData.item.id}
                        />
                    }}
                />

並為每個 InputDemo 創建一個 id：

const InputDemo = props => {
    return(
        <View key={props.id} style={{borderColor: 'black', borderWidth: 1}}>
            <TextInput
                placeholder='Search'
            />
        </View>
    )
}

但是還是不行，求幫助！！！

Answer 1

你應該傳遞extraData

一個標記屬性，用於告訴列表重新呈現（因為它實現了 PureComponent）。 如果您的 renderItem、Header、Footer 等函數中的任何一個依賴於 data prop 之外的任何內容，請將其粘貼在這里並一成不變地對待它。

<FlatList
    data={this.state.numOfInput}
    extraData={counter}
    keyExtractor={(item, index) => item.id}
    renderItem={itemData => (
        <InputDemo/>
    )}
/>

編輯：

您還有一個大問題，您的data沒有.id keyExtractor並且keyExtractor可能無法正常工作。

你可以把它改成

keyExtractor={(item, index) => index.toString()}

但這仍然不好，嘗試為每個項目添加唯一的id道具。

Answer 2

FlatList 數據屬性以 prop 作為數組。 文檔是您最好的朋友。 一切都或多或少像下面一樣，沒有經過測試，但更接近你想要的，我希望。

import React, { useState } from "react";
import {
    View,
    Text,
    Button,
    FlatList
} from 'react-native'
import InputDemo from '../components/InputDemo'

const INCREMENT = 1;


class AddInputDemo extends React.Component{
    constructor(props){
        super(props);
        this.state={
            counter: 0,
            numOfInput: [0],
            item:'',
            searchArray:[],

        }
        this.addInput = this.addInput.bind(this)
    }


    addInput(){

        this.setState((state) => ({
            counter: state.counter +=1,
            searchArray:[...this.state.searchArray, this.state.item] //appends search item to search array
            numOfInput: [...state.numOfInput, state.counter]  //don't know why you need this
        }))

    }
    render(){
        return(
            <View style={{flex: 1, justifyContent: 'center', alignItems: 'center'}}>

           <InputDemo search={(searchItem)=>this.setState({item:searchItem})}/>     
           <FlatList
                    data={this.state.searchArray}
                    keyExtractor={(item, index) => item.id}
                    renderItem={itemData => {
                        <Text>{itemData}</Text>
                    }}
                />
                <Button title='Add a location' onPress={this.addInput} />

            </View>
        );
    }

}

export default AddInputDemo;

和輸入演示

import * as React from 'react'
import {
    View,
     TextInput
} from 'react-native'

const InputDemo = props => {


   const onChangeText = (item) => {
         props.search(item);  //add search item to state of "class AddInputDemo" using props
      }
    return(
        <View style={{borderColor: 'black', borderWidth: 1}}>
            <TextInput
                placeholder='Search'
                onChangeText={text => onChangeText(text)}
            />
        </View>
    )
}

export default InputDemo;

Answer 3

編輯 2嗨，伙計們，我知道現在錯誤在哪里。 這與數據或 extraData 無關。 解決方案是我們必須用return語句包裹<InputDemo/> 。 那么它運作良好。 謝謝大家的有用答案。