Javascript 如果在React中内部循环未按预期工作

我有一个包含对象的列表，我想在react组件的组件中渲染每个对象，但我只需要渲染每个“类别”的1个元素 比如说

[
{
    "message": null,
    "user": "bob",
    "channel_name": "whatsapp",
    "created_at": "2020-09-22T15:08:48.602Z"
},
{
    "message": "Texto y archivo\r\n\r\n",
    "user": "bob",
    "channel_name": "whatsapp",
    "created_at": "2020-09-22T15:08:46.786Z"
},
{
    "message": "Probar si cada correo genera 2 jsons\r\n\r\n\r\n",
    "user": "bob",
    "channel_name": "whatsapp",
    "created_at": "2020-09-22T15:01:27.140Z"
}

]

我希望我的组件ChatStram只呈现一个且只有一个频道名称为“whatsapp”的组件，我试图通过ChatStream组件中的引用列表实现这一点，并将每个用户名添加到列表中（channelsRendered），然后检查它是否存在于引用列表中，如果它不存在，然后创建一个组件并将其添加到列表中，如果它存在，请标记为null。此函数传递给子组件

问题是它总是返回所有组件，不管它们是否在引用列表中

这是父组件

import moment from 'moment';
import React, { useState } from 'react';
import ChatBubbleStream from '../chatComponents/ChatBubbleStream';



     export default function ChatStream({state}){

         let channelsRendered = []

function pushToChannelRendered(nameChannel){
    channelsRendered.push(nameChannel)
    console.log(channelsRendered)
    console.log(channelsRendered.includes(nameChannel))
}

return (
    <div class="overFlowY">
        
        {state.map((thread) => ( 
           channelsRendered.includes(thread.channel_name) ? 
           null 
           : 
           <ChatBubbleStream
            message= {thread.message}
            channel = {thread.channel_name}
            fecha= {moment(thread.created_at).format('MMMM Do YYYY, h:mm:ss a')}
            messages=  {state.filter(channel => channel.channel_name == thread.channel_name).length}
            pushToChannelRendered={pushToChannelRendered}
            /> 
                    
        ))}        
    </div>
)
}

import React, {useEffect} from 'react';

 export default function ChatBubbleStream({ channel, reporter, nombre, medio, 
 fecha,  pushToChannelRendered}){


useEffect(() => {
    pushToChannelRendered(channel)
}, []);



return (
    <div class="row">
       Return anything
    </div>
)

从“时刻”导入时刻；
从“React”导入React，{useState}；
从“../chatComponents/ChatBubbleStream”导入ChatBubbleStream；
导出默认函数ChatStream（{state}）{
让channelsRendered=[]
函数pushToChannelRendered（名称通道）{
频道指定。推送（名称频道）
console.log（信道描述）
console.log（channelsrended.includes（namechnel））
}
返回(
{state.map（（线程）=>（
channelsrended.includes（thread.channel\u name）？
无效的
: 
channel.channel\u name==thread.channel\u name）.length}
pushToChannelRendered={pushToChannelRendered}
/> 
))}        
)
}

这是子组件

import moment from 'moment';
import React, { useState } from 'react';
import ChatBubbleStream from '../chatComponents/ChatBubbleStream';



     export default function ChatStream({state}){

         let channelsRendered = []

function pushToChannelRendered(nameChannel){
    channelsRendered.push(nameChannel)
    console.log(channelsRendered)
    console.log(channelsRendered.includes(nameChannel))
}

return (
    <div class="overFlowY">
        
        {state.map((thread) => ( 
           channelsRendered.includes(thread.channel_name) ? 
           null 
           : 
           <ChatBubbleStream
            message= {thread.message}
            channel = {thread.channel_name}
            fecha= {moment(thread.created_at).format('MMMM Do YYYY, h:mm:ss a')}
            messages=  {state.filter(channel => channel.channel_name == thread.channel_name).length}
            pushToChannelRendered={pushToChannelRendered}
            /> 
                    
        ))}        
    </div>
)
}

import React, {useEffect} from 'react';

 export default function ChatBubbleStream({ channel, reporter, nombre, medio, 
 fecha,  pushToChannelRendered}){


useEffect(() => {
    pushToChannelRendered(channel)
}, []);



return (
    <div class="row">
       Return anything
    </div>
)

import React，{useffect}来自“React”；
导出默认函数ChatBubbleStream（{channel，reporter，nombre，medio，
fecha，pushtocha}）{
useffect（（）=>{
PushToChannel渲染（通道）
}, []);
返回(
归还任何东西
)

}

很难确切地说出你想做什么，但这会对你有所帮助

import React，{useffect，useState}来自“React”；
//假API调用
常数3秒=3000；
const newNames=[“保罗·霍根”、“布拉德·皮特”、“比利·麦迪逊”]；
函数loadUsers（）{
返回新承诺（（res）=>setTimeout（（）=>res（newNames），三秒钟））；
}
导出默认函数App（）{
const[names，setNames]=useState（[“比利·麦迪逊”，“快乐的吉尔摩]）；
useffect（（）=>{
loadUsers（）
.然后（（新名称）=>
集合名（（上一个）=>{
const combled=[…prev，…newNames]；
const unique=新集合（组合）；
常量列表=[…唯一]；
退货清单；
})
)
.catch（控制台错误）；
}, []);
返回{JSON.stringify（names）}；
}

最好分两步进行

使数组包含不重复的名称

//如果NameServer是字符串数组
const uniqueNames=[…新集合（名称服务器）]

使用

map

将其转换为

uniqueNames.map（名称=>(
))

您可以复制服务器名称的示例吗？名称。includes（“奥斯卡”）应该是名称。includes（名称）我想您可以尝试更新您的问题以包含组件代码示例吗？这里似乎没有足够的代码来理解您试图做什么。