MirageJSjson資料是控制臺日志記錄，但未在React的頁面上呈現

在我的頁面上從 Mirage JS 呈現虛擬資料時，我正在進行編碼評估并遇到問題。當我控制臺記錄我正在尋找的資料時，它在控制臺中顯示得很好，但我無法弄清楚為什么它沒有在頁面上呈現。

這是 server.js

import { createServer, Model } from "miragejs";
import faker from "faker";
import avatar from "./avatar.png";

export function makeServer({ environment = "test" } = {}) {
  let server = createServer({
    environment,
    models: {
      employee: Model,
    },
    seeds(server) {
      for (let i = 0; i < 10; i  ) {
        server.create("employee", {
          id: faker.datatype.uuid(),
          firstName: faker.name.firstName(),
          lastName: faker.name.lastName(),
          email: faker.internet.email(),
          phone: faker.phone.phoneNumber(),
          bio: faker.lorem.paragraph(),
          avatar: avatar,
          address: {
            streetAddress: `${faker.address.streetAddress()} ${faker.address.streetName()}`,
            city: faker.address.city(),
            state: faker.address.stateAbbr(),
            zipCode: faker.address.zipCode(),
          },
        });
      }
    },
    routes() {
      this.namespace = "api";
      this.get(
        "/employees",
        (schema) => {
          return schema.employees.all();
        },
        { timing: 1000 }
      );
      this.patch(
        "/employees/:id",
        (schema, request) => {
          const attrs = JSON.parse(request.requestBody);
          const employee = schema.employees.find(request.params.id);
          employee.update(attrs);
        },
        { timing: 300 }
      );
      this.delete(
        "/employees/:id",
        (schema, request) => {
          const employee = schema.employees.find(request.params.id);
          employee.destroy();
          return new Response();
        },
        { timing: 300 }
      );
    },
  });
  return server;
}

這是 app.js

import { makeServer } from "./server";
import { useEffect, useState } from "react";

if (process.env.NODE_ENV === "development") {
  makeServer({ environment: "development" });
}

function App() {
  const [employees, setEmployees] = useState([])

  useEffect(() => {
    fetch('/api/employees')
    .then(res => res.json())
    .then(json => setEmployees(json.employees)
    )
  }, [])
  return (
    <div>
      <header>
        <h1>Employees</h1>
      </header>
      {employees.length > 0 ? (
        <table>
          <thead>
            <tr>
              <th>id</th>
              <th>first name</th>
              <th>last name</th>
            </tr>
          </thead>
          <tbody>
            {employees.map(({id, firstName, lastName}) => {
              <tr key={id}>
                <td>{id}</td>
                <td>{firstName}</td>
                <td>{lastName}</td>
              </tr>
          console.log(firstName)
            })}
          </tbody>
        </table>
      ) : (
        <p>No employees</p>
        )}
  </div>
  );
}
export default App;

uj5u.com熱心網友回復：

您的代碼的問題在這里：

 {employees.map(({id, firstName, lastName}) => {
              <tr key={id}>

您不會從映射函式回傳任何內容，因此不會向頁面呈現任何內容。嘗試添加return這樣的陳述句：

 {employees.map(({id, firstName, lastName}) => {
     console.log(firstName);
     return (
         <tr key={id}>
            <td>{id}</td>
            <td>{firstName}</td>
            <td>{lastName}</td>
          </tr>
        );
  })}

uj5u.com熱心網友回復：

我已經犯過這個錯誤一百萬次了。您在回呼中缺少一條return陳述句。employees.map

標籤：

上一篇：在父組件中反應子組件

下一篇：順風轉換延遲任意值僅適用于特定值