Reactjs 反应：从父函数组件传递到子函数组件时未定义道具

我有一个聊天应用程序

在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;

---

似乎什么都不起作用。

在第一个

useffect

钩子中，您对

localhost

的请求很可能没有随响应返回值。仔细检查您的控制台输出。如文所述，它应该是有效的

---

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

检查中的拼写三重sss-Messages

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

返回(
);

在you Chat.js中，您正在映射消息。当消息为空且您尝试映射其属性时，它们将导致未定义的错误

有一个条件，用于检查消息的空状态，因为您将消息定义为加载时的空数组

{messages ? (<div className="chat_body">... </div>) : (<p>loading messages</p>) }

{消息？（…）：（加载消息
）}

这总是显而易见的问题。谢谢

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

{messages ? (<div className="chat_body">... </div>) : (<p>loading messages</p>) }