為什么會這樣？ : TypeError: 無法讀取 REACT 中未定義的屬性“用戶名”

Question

我正在嘗試使信使克隆應用程序做出反應，但我真的不知道發生了什么導致此錯誤：

TypeError：無法讀取未定義的屬性“用戶名”

為什么突然出現這個錯誤？？

請看一看！

所以我有兩個文件，第一個是App.js ：

import React, { useState, useEffect } from "react";
import { Button, InputLabel, Input, FormControl } from "@material-ui/core";
import "./App.css";
import Message from "./Message";
import db from "./firebase";
import firebase from "firebase";
import FlipMove from "react-flip-move";

function App() {
  const [input, setInput] = useState("");
  const [messages, setMessages] = useState([{}]);
  const [username, setUsername] = useState("");

  useEffect(() => {
    db.collection("messages")
      .orderBy("timestamp", "desc")
      .onSnapshot((snapshot) => {
        setMessages(
          snapshot.docs.map((doc) => ({ id: doc.data, message: doc.data() }))
        );
      });
  }, []);

  useEffect(() => {
    setUsername(prompt("please enter your name"));
  }, []);

  const sendMessage = (event) => {
    event.preventDefault();
    db.collection("messages").add({
      message: input,
      username: username,
      timestamp: firebase.firestore.FieldValue.serverTimestamp(),
    });
    setInput("");
  };

  return (
    <div className="App">
      <h1>Hello</h1>
      <h2>welcome {username}</h2>
      <form className="send">
        <FormControl>
          <InputLabel>Enter a message..</InputLabel>
          <Input
            value={input}
            onChange={(event) => setInput(event.target.value)}
          />
          <Button
            disabled={!input}
            variant="contained"
            color="primary"
            type="submit"
            onClick={sendMessage}
          >
            Send Message
          </Button>
        </FormControl>
      </form>

      <FlipMove>
        {messages.map(({ id, message }) => (
          <Message key={id} username={username} message={message} />
        ))}
      </FlipMove>
    </div>
  );
}

export default App;

第二個是Message.js ，錯誤發生在：

import { Card, CardContent, Typography } from "@material-ui/core";
import React, { forwardRef } from "react";
import "./Message.css";

const Message = forwardRef(({ message, username }, ref) => {
  const isUser = username === message.username;
  return (
    <div ref={ref} className={`message ${isUser && "message_user"}`}>
      <Card className={isUser ? "message_userCard" : "message_guestCard"}>
        <CardContent>
          <Typography color="white" variant="h5" component="h2">
            {message.username}: {message.message}
          </Typography>
        </CardContent>
      </Card>
    </div>
  );
});

export default Message;

錯誤在這一行const isUser = username === message.username;

Answer 1

這意味着作為 prop 傳遞給Message組件的message值是未定義的。

因此，當您在此處遍歷消息時， messages數組中的至少一個對象沒有為其message鍵定義的值：

      <FlipMove>
        {messages.map(({ id, message }) => (
          <Message key={id} username={username} message={message} />
        ))}
      </FlipMove>

嘗試在render()函數之前打印出整個messages數組並檢查存在哪些值。

嘗試更改此行：

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

對此：

const [messages, setMessages] = useState([]);

編輯：問題在於以下行意味着您正在將messages數組初始化為： [{}] ：

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

這意味着您的數組中有一個元素，一個空的 object {}。 它將保持這種狀態，直到您的數據庫讀取完成並用您的真實數據填充您的數組。 所以第一次，你的渲染 function 將嘗試理解這個只有一個空 object 的數組。

因此，當您像這樣迭代它時：

        {messages.map(({ id, message }) => (
          <Message key={id} username={username} message={message} />
        ))}

然后對於每個元素，由於這個解構賦值，它會尋找一個id和message屬性（如果你不確定那是什么，請查閱該術語）：

({ id, message })

因此，因為您從數組中的一個空 object 元素開始，它將為該空 object 查找.message屬性，該屬性將不存在。 它將是undefined的。 這個undefined作為道具傳遞給您的Message組件。 然后在您的Message組件中，這一行：

const isUser = username === message.username;

嘗試訪問undefined上的.username屬性，因為請記住， message = undefined ，因為這是您無意中作為道具傳遞的。 這就是為什么錯誤抱怨它在undefined的東西上找不到username屬性的原因：

TypeError: Cannot read property 'username' of undefined