如果内部循环在 React 中没有按预期工作答案

【问题标题】：If inside loop not working as expected in React如果内部循环在 React 中没有按预期工作
【发布时间】：2021-01-09 02:26:52
【问题描述】：

我有一个包含对象的列表，我想在反应组件的组件中渲染每个对象，但我只需要渲染每个“类别”的 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）来实现这一点，然后检查它是否存在于引用列表中，如果不存在，则创建一个组件并将其添加到列表中，如果存在则标记为空。这个函数被传递给子组件。

问题在于它总是返回所有组件，无论它们是否在参考列表中。

这是父组件

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

}

【问题讨论】：

你能复制一份namesOfServer的样本吗？
names.includes("oscar") 应该是 names.includes(name) 我认为
您能否尝试更新您的问题以包含Minimal, Complete, and Reproducible 组件代码示例？这里似乎没有足够的代码来理解您要做什么。

标签： javascript reactjs

【解决方案1】：

Sandbox

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

import React, { useEffect, useState } from "react";

// Fake API call
const threeSeconds = 3000;
const newNames = ["Paul Hogan", "Brad Pit", "Billy Madison"];
function loadUsers() {
  return new Promise((res) => setTimeout(() => res(newNames), threeSeconds));
}

export default function App() {
  const [names, setNames] = useState(["Billy Madison", "Happy Gilmore"]);
  useEffect(() => {
    loadUsers()
      .then((newNames) =>
        setNames((prev) => {
          const combined = [...prev, ...newNames];
          const unique = new Set(combined);
          const list = [...unique];
          return list;
        })
      )
      .catch(console.error);
  }, []);
  return <div>{JSON.stringify(names)}</div>;
}

【讨论】：

【解决方案2】：

最好分两步。

使数组包含不重复的名称

// if namesServer is an array of string
const uniqueNames = [...new Set(namesServer)]

使用map 将其转换为<ChatBubbleStream /> 的数组

uniqueNames.map(name => (
  <ChatBubbleStream name={name} names={uniqueNames} />
))

【讨论】：