在 React Native 中按键更新列表元素

Question

首先，我对 React 的经验很少，我仍在学习这些术语。基本上，我拥有的是一个组件，它将根据通过 fetch() 调用获得的一些 JSON 绘制一个列表。我现在需要做的是能够根据从 EventSource 接收到的事件更新每个列表元素。从 EventSource 接收到的事件将采用{id : data} 列表中的每个项目都有一个唯一标识符的形式，并且基于即将到来的事件，我想使用来自事件的 ID 在列表上闪烁一个活动指示器。我无法弄清楚如何做到这一点。我似乎无法直接解决列表中的任何项目，即使每个项目都有唯一的 ID。从本质上讲，我一直在通过 google 搜索此问题的解决方案，但我遇到的所有结果似乎都没有解决此问题。import React from 'react';import {Text, View, StyleSheet, Button, ScrollView} from 'react-native';export default class MainFilter extends React.Component {    constructor(props){        super(props);        this.state ={ isLoading: true};        this.filterURL = this.props.filterURL;    }    componentDidMount(){        init(this.filterURL).then(resp => {            this.setState({                filter: resp['fullFilter'],                filterKeys: resp['filterKeys'],                isLoading: false            });        })    }    render(){        if(this.state.isLoading){            return(                <View>                    <Text>Component is LOADING</Text>                </View>            )        }        let filterKeys = this.state.filterKeys;        let fullFilter = this.state.filter;        const filterList = filterKeys.map((item) =>            <View key={item} style={styles.container}>                <View style={{flex: 1, flexDirection: 'row'}}>                    <View style={{borderWidth: 2.5, borderColor: '#00FF00',width: '50%'}}>                        <Text style={{fontSize: 19, fontWeight: 'bold'}}>{item}</Text>                        <Text style={{fontSize: 16}}>{fullFilter[item]}</Text>                    </View>                    <View>                        <Text>KEKEKEK</Text>                    </View>                </View>                <Button key={item} title={"ADD TO FOCUS"} onPress={function() {console.log(item)}}/>            </View>        );        );    }}基本上我需要做的是在“filterList”常量上的每个项目上闪烁一个活动指示器。所以。我该怎么做呢？是否可以？我真的想避免必须不断地重绘整个组件，因为我不想潜在地进行数百次fetch()调用。

Answer 1

你的意思是这样的？

import React from 'react';

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

export default class MainFilter extends React.Component {

constructor(props){

    super(props);

    this.state ={ isLoading: true};

    this.filterURL = this.props.filterURL;

}

componentDidMount(){

    init(this.filterURL).then(resp => {

        this.setState({

            filter: resp['fullFilter'],

            filterKeys: resp['filterKeys'],

            isLoading: false

        });

    })

}

filterList(isLoading) {

    const {filterKeys, fullFilter} = this.state;

    return isLoading ? filterKeys.map((item) => (

        <View key={item} style={styles.container}>

            <View style={{flex: 1, flexDirection: 'row'}}>

                <View style={{borderWidth: 2.5, borderColor: '#00FF00',width: '50%'}}>

                    <Text style={{fontSize: 19, fontWeight: 'bold'}}>{item}</Text>

                    <Text style={{fontSize: 16}}>{fullFilter[item]}</Text>

                </View>

                <View>

                    <Text>KEKEKEK</Text>

                </View>

            </View>

            <Button key={item} title={"ADD TO FOCUS"} onPress={function() {console.log(item)}}/>

        </View>

    ) : (

      <View>

           <Text>Component is LOADING</Text>

      </View>

 ));

}

render(){

    let filterIndex = {};

    for(let i = 0; i < filterList.length; i++)

    {

        filterIndex[filterList[i].key] = filterList[i]

    }

    console.log(filterIndex);

     return(

        <ScrollView style={{flex: 1, paddingTop:20}}>

            {this.filterList(this.state.isLoading)}

        </ScrollView>

    );

}

}

对糟糕的格式感到抱歉。

Answer 2

最终完全重新设计了应用程序。现在面临不同的问题。

问题不再相关。