第七色在线视频,2021少妇久久久久久久久久,亚洲欧洲精品成人久久av18,亚洲国产精品特色大片观看完整版,孙宇晨将参加特朗普的晚宴

為了賬號安全，請及時綁定郵箱和手機(jī)立即綁定
已解決430363個問題，去搜搜看，總會有你想問的

在 React Native 中動態(tài)添加項(xiàng)目到 FlatList

在 React Native 中動態(tài)添加項(xiàng)目到 FlatList

阿晨1998 2022-06-16 10:01:48
我有一個包含兩個項(xiàng)目的 FlatList。我需要在這個列表中附加其他元素。當(dāng)用戶單擊按鈕時，來自文本輸入的數(shù)據(jù)應(yīng)出現(xiàn)在 FlatList 的末尾。因此，我嘗試將數(shù)據(jù)對象推送到列表數(shù)組的末尾，但新項(xiàng)目替換了最后一個。import React, { useState } from 'react';import { Text, View, StyleSheet, Button } from 'react-native';import { FlatList } from 'react-native-gesture-handler';export default function HomeScreen() {  var initialElements = [    { id : "0", text : "Object 1"},    { id : "1", text : "Object 2"},  ]  const [exampleState, setExampleState] = useState(initialElements);  const [idx, incr] = useState(2);  const addElement = () => {    var newArray = [...initialElements , {id : toString(idx), text: "Object " + (idx+1) }];    initialElements.push({id : toString(idx), text: "Object " + (idx+1) });    incr(idx + 1);    setExampleState(newArray);  }  return (    <View style={styles.container}>        <FlatList            keyExtractor = {item => item.id}              data={exampleState}            renderItem = {item => (<Text>{item.item.text}</Text>)} />        <Button          title="Add element"          onPress={addElement} />    </View>  );}const styles = StyleSheet.create({  container: {    flex: 1,    backgroundColor: '#fff',    width: '100%',    borderWidth: 1  },});
查看完整描述

3 回答

?
慕姐8265434

TA貢獻(xiàn)1813條經(jīng)驗(yàn) 獲得超2個贊

import React, { useState } from 'react';

import { Text, View, StyleSheet, Button } from 'react-native';

import { FlatList } from 'react-native-gesture-handler';


export default function HomeScreen() {


  var initialElements = [

    { id : "0", text : "Object 1"},

    { id : "1", text : "Object 2"},

  ]


  const [exampleState, setExampleState] = useState(initialElements)


  const addElement = () => {

    var newArray = [...initialElements , {id : "2", text: "Object 3"}];

    setExampleState(newArray);

  }


  return (

    <View style={styles.container}>

        <FlatList

            keyExtractor = {item => item.id}  

            data={exampleState}

            renderItem = {item => (<Text>{item.item.text}</Text>)} />

        <Button

          title="Add element"

          onPress={addElement} />

    </View>

  );

}


const styles = StyleSheet.create({

  container: {

    flex: 1,

    backgroundColor: '#fff',

    width: '100%',

    borderWidth: 1

  },

});


您只是在更改 listElements 數(shù)組。這不會觸發(fā)組件的重新渲染，因此平面列表將保持不變。


在組件中創(chuàng)建一個狀態(tài)變量并將您的數(shù)據(jù)存儲在其中，以便任何修改都會導(dǎo)致重新渲染。


查看完整回答
反對 回復(fù) 2022-06-16
?
千萬里不及你

TA貢獻(xiàn)1784條經(jīng)驗(yàn) 獲得超9個贊

我通過在導(dǎo)出函數(shù)之外定義數(shù)組來修復(fù)它


import React, { useState } from 'react'

import { StyleSheet, View, TextInput, TouchableOpacity, Text, FlatList } from 'react-native'


let tipArray = [

    {key: '1', tip: 20},

    {key: '2', tip: 12}

]


const screen = function tipInputScreen( {navigation} ) {

    

    const [ tip, setTip ] = useState('')

    

    const addTip = ()=>{

        if(tip == "")return


        tipArray.push({key: (tipArray.length + 1).toString(), tip})

        setTip('')

    }


    const logInput = (input)=>{

        setTip(input)

    }


    const renderTip = ({ item }) => {

        return(

        <TouchableOpacity style={styles.listItem}>

            <Text style={styles.buttonText}>{`${item.tip} $`}</Text>

        </TouchableOpacity>)

    }


    return (

        <View

        style={styles.background}>

            <TextInput

            style={styles.input}

            keyboardType={'number-pad'}

            keyboardAppearance={'dark'}

            onChangeText={logInput}

            value={tip}

            />


            <TouchableOpacity

            style={styles.redButton}

            onPress={addTip}>

                <Text style={styles.buttonText}>Add Tip</Text>

            </TouchableOpacity>

        

            <FlatList

            data={tipArray}

            renderItem={renderTip}

            style={styles.flatList}

            />

        </View>

    )

}


const styles = StyleSheet.create({

    background: {

        backgroundColor: 'grey',

        paddingTop: Platform.OS === "android" ? 25:0,

        width: '100%',

        height: '100%',

        alignItems: 'center'

    },

    input: {

        marginTop:40,

        color:'white',

        fontSize:30,

        backgroundColor: "#2e2a2a",

        height: 50,

        width: '90%',

        textDecorationColor: "white",

        borderColor: 'black',

        borderWidth: 2

    },

    flatList:{

        width: "100%"

    },

    listItem: {

        width: "90%",

        height: 50,

        backgroundColor: "#2e2e2e",

        borderRadius: 25,

        marginVertical: 4,

        marginHorizontal: "5%",

        justifyContent: "center"

    },

    listItemTitle: {

        color: "white",

        textAlign: "center",

        fontSize: 18

    },

    redButton: {

        justifyContent: "center",

        width: "90%",

        height: 50,

        backgroundColor: "red",

        borderRadius: 25,

        marginHorizontal: 20,

        marginVertical: 10

    },

    buttonText: {

        color: "white",

        textAlign: "center",

        fontSize: 18

    }

})


export default screen;

這是一個更大的應(yīng)用程序的一部分，但它應(yīng)該可以解決問題，我希望它有所幫助


查看完整回答
反對 回復(fù) 2022-06-16
?
紫衣仙女

TA貢獻(xiàn)1839條經(jīng)驗(yàn) 獲得超15個贊

我通過將數(shù)組更改為狀態(tài)變量來解決替換元素的問題。


import React, { useState } from 'react';

import { Text, View, StyleSheet, Button } from 'react-native';

import { FlatList } from 'react-native-gesture-handler';


export default function HomeScreen() {


  const [initialElements, changeEl]  = useState([

    { id : "0", text : "Object 1"},

    { id : "1", text : "Object 2"},

  ]);


  const [exampleState, setExampleState] = useState(initialElements);

  const [idx, incr] = useState(2);


  const addElement = () => {

    var newArray = [...initialElements , {id : idx, text: "Object " + (idx+1) }];

    incr(idx + 1);

    console.log(initialElements.length);

    setExampleState(newArray);

    changeEl(newArray);

  }


  return (

    <View style={styles.container}>

        <FlatList

            keyExtractor = {item => item.id}  

            data={exampleState}

            renderItem = {item => (<Text>{item.item.text}</Text>)} />

        <Button

          title="Add element"

          onPress={addElement} />

    </View>

  );

}


const styles = StyleSheet.create({

  container: {

    flex: 1,

    backgroundColor: '#fff',

    width: '100%',

    borderWidth: 1

  },

});


查看完整回答
反對 回復(fù) 2022-06-16
  • 3 回答
  • 0 關(guān)注
  • 165 瀏覽
慕課專欄
更多

添加回答

舉報

0/150
提交
取消
微信客服

購課補(bǔ)貼
聯(lián)系客服咨詢優(yōu)惠詳情

 幫助反饋 APP下載

慕課網(wǎng)APP
您的移動學(xué)習(xí)伙伴

 公眾號

掃描二維碼
關(guān)注慕課網(wǎng)微信公眾號