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>
        );
        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}}>
                {filterList}
            </ScrollView>
        );
    }
}






const init = async (url) =>{

    let response = await fetch(url);

    let respJSON = await response.json();
    let filterParts = {};

    filterParts['filterKeys'] = Object.keys(respJSON);
    filterParts['fullFilter'] = respJSON;

    return filterParts

};

基本上，我需要做的是在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

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

问题不再相关。

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

2 个答案: