在Laravel的API中顯示反應消費串列

import Table from "react-bootstrap/Table";
import axios from "axios";
import { Link } from "react-router-dom";
import { useState, useEffect } from "react";
import Form from "react-bootstrap/Form";
import Button from "react-bootstrap/Button";

const endpoint = "http://localhost:8000/api";
const endpointAccount = "http://localhost:8000/api";

const OpportunityShow = () => {
  const [opportunities, setOpportunities] = useState([]);
  const [accounts, setAccounts] = useState([]);

  useEffect(() => {
    getAllOpportunities();
  }, []);

  useEffect(() => {
    getAllAccounts();
  }, []);

  const getAllAccounts = async () => {
    const response = await axios.get(`${endpointAccount}/accounts`);
    setAccounts(response.data);
    console.log(accounts);
  };

  const getAllOpportunities = async () => {
    const response = await axios.get(`${endpoint}/opportunities`);
    setOpportunities(response.data);
  };

  const deleteOpportunity = async (id) => {
    await axios.delete(`${endpoint}/opportunity/${id}`);
    getAllOpportunities();
  };

  return (
    <div className="d-grid gap-2">
      <div className="row">
        <div className="col-8">
          <Form className="d-flex m-1">
            <Form.Control
              type="search"
              placeholder="Filtro"
              className="me-2"
              aria-label="Search"
            />
            <Button variant="outline-secondary">Search</Button>
          </Form>
        </div>
        <div className="col-4">
          <Link
            to="/opportunity/create"
            className="col-11 btn btn-outline-primary m-1 "
          >
            Create
          </Link>
        </div>
      </div>
      <Table hover className="">
        <thead>
          <tr>
            <th scope="col">#</th>
            <th scope="col">Nome</th>
            <th scope="col">Conta id</th>
            <th scope="col">Conta nome</th>
            <th scope="col">Fase</th>
            <th scope="col">Data Fechamento</th>
            <th className="text-center" scope="col">
              A??es
            </th>
          </tr>
        </thead>
        <tbody>
          {opportunities.map((opportunity) => (
            <tr key={opportunity.id}>
              <th>{opportunity.id}</th>
              <td>{opportunity.nome}</td>
              <td>{opportunity.account_id}</td>
              <td value={opportunity.account_id}>{accounts.nome}</td>
              <td>{opportunity.estagioNome}</td>
              <td>{opportunity.dataApresentacao}</td>
              <td className="text-center">
                <Link
                  to={`edit/${opportunity.id}`}
                  className="btn btn-outline-warning"
                >
                  Editar
                </Link>
                <button
                  onClick={() => deleteOpportunity(opportunity.id)}
                  className="btn btn-outline-danger m-1"
                >
                  Deletar
                </button>
              </td>
            </tr>
          ))}
        </tbody>
      </Table>
    </div>
  );
};

export default OpportunityShow;

實際上，我可以在機會中獲取帳戶 ID，但我不知道如何將其與帳戶陣列 ID 相關聯，從而將其名稱與機會名稱一起回傳。

早上好你好嗎？親愛的，我有 2 個陣列 1 個機會和 1 個帳戶，其中一個帳戶可以有多個機會。在機會中，??我有帳戶 ID。顯示機會時，我想從客戶表中獲取客戶名稱。所以它是：機會名稱 | 帳戶名稱 在我的串列螢屏上。

uj5u.com熱心網友回復：

由于您使用的是 laravel，因此您應該使用它們的模型在同一查詢中檢索對其他表的外部參考，而不是像現在這樣單獨進行并獲取 2 個不同的陣列。假設以下是機會表的模型，向客戶表添加關系，如下所示：

class Opportunity extends Model
{    
    // Assuming you've named your table opportunities 
    protected $table = 'opportunities';

    public function account() {
        // Assuming Account is your model for accounts table
        return $this->belongsTo(Account::class, 'account_id');
    }
}

然后，您可以執行以下操作來檢索/api/opportunitiesGET 端點內每個機會實體中的嵌套帳戶實體：

// Endpoint to get opportunities
public function getOpportunities() {
    return Opportunity::with('account')->get();
}

在前端，您的機會陣列將如下所示：

[
    {
        id: 1,
        // Other opportunity properties...
        account: {
            id: 1,
            // Other account properties...
        }
    }
    // Other opportunity instances...
]

uj5u.com熱心網友回復：

如果其他條件變得更好，你可以這樣做

標籤：javascript反应拉拉维尔反应式反应路由器

上一篇：在ReactNative中修改元素的屬性

下一篇：react-native-web中是否有:hover的等價物？