javascript - 在 React JS 的子组件中，道具的价值没有体现

Question

我将分享传递 props 的代码

import React ,{useEffect,useState} from 'react'
import styled from 'styled-components'
import InfoIcon from '@material-ui/icons/Info';
 import ChatInput from './ChatInput';
import ChatMessage from './ChatMessage'
import db from '../FireBase/FireBase';
import { useParams } from 'react-router';

const Chat = () => {
let {channelId} = useParams();
const [channel, setChannel] = useState()
const[messages , setMessages] = useState([])
const getChannel = ()=>{
    db.collection('rooms')
    .doc(channelId)
    .onSnapshot((snapshot)=>{
        setChannel(snapshot.data())
    })
}

const getMessages = ()=>{
    db.collection('rooms')
    .doc(channelId)
    .collection('Messages')
    .onSnapshot((snapshot)=>{
       let messages = snapshot.docs.map((doc)=>doc.data());
    //    console.log(messages[0].user)  
       setMessages(messages)
    })
}

useEffect(()=>{
       getChannel();
       getMessages();
    },[channelId])

    
return (
    <Container>
        <Header> 
        <Channel>
            <ChannelName>
                #{ channel && channel.name}
            </ChannelName>
            <ChannelInfo>
                A great way to learn react!
            </ChannelInfo>
        </Channel>
        <ChannelDetails>
            <div>
                Details
            </div>
            <Info />
        </ChannelDetails>
        </Header>
        <MessageContainer>
            {
                  messages.length >= 0 &&
                 messages.map((data,index)=>{
                    <ChatMessage  data={data}/>
                  })
                
            }
            
        </MessageContainer>
        <ChatInput />
    </Container>
)

}

导出默认聊天；

现在，我将分享 ChatMessage.js 文件的代码

import React from 'react'
import styled from 'styled-components'

const ChatMessage = ({data}) => {
return (
<Container>
    <UserAvatar>
        <img src={data.userImage} alt="img" />
    </UserAvatar>
    <MessageContent>
        <Name>
            <span>{data.user}</span>
        </Name>
        <Text>
            {data.text}
        </Text>
    </MessageContent>
</Container>
)
 }

 export default ChatMessage

这是描述组件层次结构的图像， 组件层次结构

因为我使用的是firebase，所以也会添加firebase字段的图像， 在这里

不知道为什么不显示值，有人可以帮我吗？

标签： javascriptreactjswebecmascript-6

Answer 1

在您的代码中缺少返回语句，您可以使用 () 而不是 {}

{
   messages.length >= 0 &&
   messages.map((data,index)=>(<ChatMessage  data={data}/>
))
}