Javascript 按React Native中的键更新列表元素

首先，我对React几乎没有经验，我还在学习术语

基本上，我有一个组件，它将根据通过fetch（）调用获得的一些JSON绘制一个列表。 我现在需要做的是能够根据从EventSource接收到的事件更新每个列表元素

从EventSource接收的事件将采用

{id:data}

列表中的每一项都有一个唯一的标识符，根据即将发生的事件，我想在列表中闪烁一个带有事件ID的活动指示器

我不知道该怎么做。 我似乎无法直接处理列表中的任何项目，即使每个项目都有一个唯一的ID

基本上，我一直在通过谷歌搜索解决这个问题的方法，但我所看到的结果似乎都没有解决这个问题

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

};

从“React”导入React；
从“react native”导入{文本、视图、样式表、按钮、滚动视图}；
导出默认类MainFilter扩展React.Component{
建造师（道具）{
超级（道具）；
this.state={isLoading:true}；
this.filterURL=this.props.filterURL；
}
componentDidMount（）{
init（this.filterURL）.then（resp=>{
这是我的国家({
筛选器：resp['fullFilter']，
filterKeys:resp['filterKeys']，
孤岛加载：false
});
})
}
render（）{
if（此.state.isLoading）{
返回(
组件正在加载
)
}
让filterKeys=this.state.filterKeys；
让fullFilter=this.state.filter；
常量过滤器列表=过滤器键.map（（项）=>
{item}
{fullFilter[项目]}
凯克
);
设filterIndex={}；
for（设i=0；i{
let response=等待获取（url）；
让respJSON=wait response.json（）；
设filterpart={}；
filterParts['filterKeys']=Object.keys（respJSON）；
filterParts['fullFilter']=respJSON；
返回过滤器部件
};

基本上，我需要做的是在'filterList'常量的每个项目上闪烁一个活动指示器

所以。我该怎么做？可能吗？

---

我真的不想不断地重新绘制整个组件，因为我不想潜在地进行数百次

fetch（）

调用。

你是说这样的事情吗

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>
    );
}
}

从“React”导入React；
从“react native”导入{文本、视图、样式表、按钮、滚动视图}；
导出默认类MainFilter扩展React.Component{
建造师（道具）{
超级（道具）；
this.state={isLoading:true}；
this.filterURL=this.props.filterURL；
}
componentDidMount（）{
init（this.filterURL）.then（resp=>{
这是我的国家({
筛选器：resp['fullFilter']，
filterKeys:resp['filterKeys']，
孤岛加载：false
});
})
}
过滤器列表（正在加载）{
const{filterKeys，fullFilter}=this.state；
返回isLoading？filterKeys.map（（项目）=>(
{item}
{fullFilter[项目]}
凯克
) : (
组件正在加载
));
}
render（）{
设filterIndex={}；
for（设i=0；i

---

抱歉，格式太糟糕了

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

---

问题不再相关。

我现在无法测试，但我会在回家后测试。我想说清楚的是，我希望能够将道具发送到

filterList

中的元素中，并更新它们的样式，以响应通过服务器发送的事件接收到的事件。您的代码版本允许这样做吗？我看不出你在元素上有什么新的设置。您可以为您的更改添加一点解释吗？我应该在这里添加一点信息：我知道我可以在假定的eventhandler中为服务器发送的事件调用

setState（）

，而无需再次触发

componentDidMount（）

方法。但是，问题是我无法处理

filterList

的特定项。正如我所说，事件以

{id:data}

的格式出现，其中

id

始终对应于

过滤器列表中的一个键。那么，如何修改与我从SSE获得的
id
对应的项？