在 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){&nbsp; &nbsp; super(props);&nbsp; &nbsp; this.state ={ isLoading: true};&nbsp; &nbsp; this.filterURL = this.props.filterURL;}componentDidMount(){&nbsp; &nbsp; init(this.filterURL).then(resp => {&nbsp; &nbsp; &nbsp; &nbsp; this.setState({&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; filter: resp['fullFilter'],&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; filterKeys: resp['filterKeys'],&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; isLoading: false&nbsp; &nbsp; &nbsp; &nbsp; });&nbsp; &nbsp; })}filterList(isLoading) {&nbsp; &nbsp; const {filterKeys, fullFilter} = this.state;&nbsp; &nbsp; return isLoading ? filterKeys.map((item) => (&nbsp; &nbsp; &nbsp; &nbsp; <View key={item} style={styles.container}>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <View style={{flex: 1, flexDirection: 'row'}}>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <View style={{borderWidth: 2.5, borderColor: '#00FF00',width: '50%'}}>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <Text style={{fontSize: 19, fontWeight: 'bold'}}>{item}</Text>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <Text style={{fontSize: 16}}>{fullFilter[item]}</Text>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </View>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <View>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <Text>KEKEKEK</Text>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </View>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </View>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <Button key={item} title={"ADD TO FOCUS"} onPress={function() {console.log(item)}}/>&nbsp; &nbsp; &nbsp; &nbsp; </View>&nbsp; &nbsp; ) : (&nbsp; &nbsp; &nbsp; <View>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;<Text>Component is LOADING</Text>&nbsp; &nbsp; &nbsp; </View>&nbsp;));}render(){&nbsp; &nbsp; let filterIndex = {};&nbsp; &nbsp; for(let i = 0; i < filterList.length; i++)&nbsp; &nbsp; {&nbsp; &nbsp; &nbsp; &nbsp; filterIndex[filterList[i].key] = filterList[i]&nbsp; &nbsp; }&nbsp; &nbsp; console.log(filterIndex);&nbsp; &nbsp; &nbsp;return(&nbsp; &nbsp; &nbsp; &nbsp; <ScrollView style={{flex: 1, paddingTop:20}}>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; {this.filterList(this.state.isLoading)}&nbsp; &nbsp; &nbsp; &nbsp; </ScrollView>&nbsp; &nbsp; );}}对糟糕的格式感到抱歉。

Answer 2

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