如何從 JSON 檢索獲取數據？

Question

在 React 組件中

import React from 'react';
export default function Customers (props) {
   const [customers, setCustomers] = React.useState([]);
   React.useEffect(() => { 
      fetch("/data.json").then(response => response.json())
      .then(data => {
         setCustomers([data])
      })
   }, []);

   return (
      <div id='Customers'>
         {customers.map(c => c.name)}
      </div>
   )

如何僅顯示公共目錄中名為 data.json 的文件中的客戶姓名？

{
    "customers": [
        {
            "id": 542,
            "name": "E"
        },
        {
            "id": 354,
            "name": "V"
        },
        {
            "id": 54534
            "name": "A"
        }        ,
        {
            "id": 33,
            "name": "K"
        }
    ],
    "packages": [
        {
            "id": 3643453453453,
            "weight": 6343
        },
        {
            "id": 453453,
            "weight": 4534534534
        }
    ]
}

我嘗試使用customers["customers"] 或customers.customers 但沒有任何效果...

謝謝。

Answer 1

我認為您應該將React.useEffect更改為此

React.useEffect(() => { 
  fetch("/data.json")
  .then(response => response.json())
  .then(data => {
    setCustomers(data.customers) //this is where I made the change
  });
}, []);

Answer 2

import React from 'react';
export default function Customers (props) {
   const [data, setData] = React.useState({});
   React.useEffect(() => { 
      fetch("/data.json").then(response => response.json())
      .then(res => {
         setCustomers(res)
      })
   }, []);

   return (
      <div id='Customers'>
         {data && data.customers ? data.customers.map(c => c.name) : null}
      </div>
   )