Question

我有一个聊天应用程序。

在 App.js 函数组件中，我有一个消息状态初始化为一个空数组。

    import React, { useState, useEffect } from 'react';
import './App.css';
import Sidebar from './Sidebar';
import Chat from './Chat';
import Pusher from 'pusher-js';
import axios from './axios';

function App() {
  const [messages, setMessages] = useState([]);

  useEffect(() => {
    axios.get('http://localhost:9000/messages/sync')
    .then(response => {
      console.log(response.data);
      setMessages(response.data);
    })
  }, [])

  // when function component loads, run the follow once
  useEffect(() => {
    const pusher = new Pusher('1693ef51485e86ca1e9f', {
      cluster: 'us2',
    });

    const channel = pusher.subscribe('messages');
    channel.bind('inserted', (newMessage) => {
      alert(JSON.stringify(newMessage));
      setMessages([...messages, newMessage]);
    });

    return () => {
      channel.unbind_all();
      channel.unsubscribe();
    };
  }, [messages])

  return (
    <div className="app">
      <div className="app_body">
        <Sidebar />
        <Chat messsages={messages}/>
      </div>
    </div>
  );
}

export default App;

一旦消息存储在那里，消息状态就会作为道具传递给 Chat.js 中的函数组件。

import { Avatar, IconButton } from '@material-ui/core';
import SearchOutlinedIcon from '@material-ui/icons/SearchOutlined';
import AttachFileIcon from '@material-ui/icons/AttachFile';
import MoreVertIcon from "@material-ui/icons/MoreVert";
import InsertEmoticonIcon from '@material-ui/icons/InsertEmoticon';
import MicIcon from '@material-ui/icons/Mic';
import React from 'react';
import './Chat.css';

function Chat({ messages }) {
    console.log(messages)
    return (
        <div className="chat">
            <div className="chat_header">
                <Avatar />

                <div className="chat_headerInfo">
                    <h3>Room Name</h3>
                    <p>Last seen at...</p>
                </div>

                <div className="chat_headerRight">
                    <IconButton>
                        <SearchOutlinedIcon />
                    </IconButton>
                    <IconButton>
                        <AttachFileIcon />
                    </IconButton>
                    <IconButton>
                        <MoreVertIcon />
                    </IconButton>
                </div>
            </div>
            
            <div className="chat_body">
                {console.log(messages)}
                {/**messages.map((message) => {
                    <p className={`chat_message ${message.received && "chat_receiver"}`}>
                        <span className="chat_name">{message.name}</span>
                        {message.message}
                        <span className="chat_timestamp">
                        {message.timestamp}    
                        </span>
                    </p>
                }) */}
                
            </div>

            <div className="chat_footer">
                <InsertEmoticonIcon />
                <form>
                    <input placeholder="Type a message"
                    type="text"
                    />
                    <button type="submit">
                    Send a message
                    </button>
                </form>
                <MicIcon />
            </div>
        </div>
    )
}

export default Chat

然而消息在聊天中是未定义的。

错误在哪里？我已经尝试过将道具传递给聊天：

function Chat (props) {
  {console.log(props.message)}
}

似乎没有任何效果。

Answer 1

检查拼写tripple sss - 消息

return (
    <div className="app">
      <div className="app_body">
        <Sidebar />
        <Chat messsages={messages}/>
      </div>
    </div>
  );

Answer 2

很可能您在第一个 localhost 挂钩中对 useEffect 的请求没有随响应返回值。仔细检查您的控制台输出。正如所写，它应该可以正常工作。

如果这看起来很好，那么我会说您需要清除构建缓存。

React：从父函数组件传递给子函数组件时未定义的道具

2 个答案: