获取没有响应

Question

我有这个 App 组件，我想从背面的 API 中获取一些数据：

const App = () => {
  const [restaurants, setRestaurants] = useState("");

  useEffect(() => {
    const fetchData = async () => {
      try {
        const response = await fetch(
          "http://localhost:3001/api/v1/restaurants"
        );
        const data = await response.json();
        console.log(data);
        setRestaurants(data);
      } catch (err) {
        console.log("Cant fetch");
      }
    };
    fetchData();
  }, []);

  return (
    // <RestaurantContextProvider>
    <div className="container">
      <Router>
        <Routes>
          <Route exact path="/" element={<Home restaurants={restaurants} />} />
          <Route
            exact
            path="/restaurants/:id/update"
            element={<UpdatePage />}
          />
          <Route
            exact
            path="/restaurants/:id"
            element={<RestaurantDetailPage />}
          />
        </Routes>
      </Router>
    </div>
    // </RestaurantContextProvider>
  );
};

export default App;

如果我在 Route 元素中更改组件的元素，它会获取但不会呈现。 怎么了？我在Router的V6文档上没有找到答案。

已编辑：

如果我在这个组件中添加 fetch，它会正常获取数据。

const RestaurantsList = (restaurants) => {
  

  return (
    <div className="list-group">
      <table className="table table-hover table-dark">
        
        <tbody>
          {restaurants &&
            restaurants.map((res) => (
              <tr key={res.id}>
                <td>{res.name}</td>
                <td>{res.location}</td>
                <td>{"$".repeat(res.price_range)}</td>
                <td>Reviews</td>
                <td>
                  <button className="btn btn-warning">Update</button>
                </td>
                <td>
                  <button className="btn btn-danger">Delete</button>
                </td>
              </tr>
            ))}
        </tbody>
      </table>
    </div>
  );
};

export default RestaurantsList;

这里是 index.js：

import React from "react";
import ReactDOM from "react-dom";
import App from "./App";

ReactDOM.render(<App />, document.getElementById("root"));

Answer 1

您可能已经在App 中的挂载useEffect 钩子中成功调用了fetchData，并在restaurants 道具上将restaurants 状态传递给Home：

<Route path="/" element={<Home restaurants={restaurants} />} />

但是在路由组件中，您根本没有访问 restaurants 道具，而是将道具对象命名为 restaurants 并尝试映射它。 React props 对象，如果分配给一个参数，则总是定义，但它是一个对象，而不是一个数组。

const RestaurantsList = (restaurants) => { // <-- props object is restaurants
  return (
    <div className="list-group">
      <table className="table table-hover table-dark">
        <tbody>
          {restaurants &&
            restaurants.map((res) => (
              <tr key={res.id}>
                <td>{res.name}</td>
                <td>{res.location}</td>
                <td>{"$".repeat(res.price_range)}</td>
                <td>Reviews</td>
                <td>
                  <button className="btn btn-warning">Update</button>
                </td>
                <td>
                  <button className="btn btn-danger">Delete</button>
                </td>
              </tr>
            ))}
        </tbody>
      </table>
    </div>
  );
};

解决：

1. 访问 restaurants.restaurants 以获取 实际 restaurants 属性，该属性是要映射的数组。

   const RestaurantsList = (restaurants) => {
     return (
       <div className="list-group">
         <table className="table table-hover table-dark">
           <tbody>
             {restaurants.restaurants.map((res) => (
               <tr key={res.id}>
                 ...
               </tr>
             ))}
           </tbody>
         </table>
       </div>
     );
   };
   

   不过，按照惯例，您应该将 props 对象命名为 props，以便更清楚它是什么，并且不会导致您的困惑。

   const RestaurantsList = (props) => {
     return (
       <div className="list-group">
         <table className="table table-hover table-dark">
           <tbody>
             {props.restaurants.map((res) => (
               <tr key={res.id}>
                 ...
               </tr>
             ))}
           </tbody>
         </table>
       </div>
     );
   };
   

2. 使用道具destructuring assignment 到达restaurants 道具。

   const RestaurantsList = (props) => {
     const { restaurants } = props;
     return (
       <div className="list-group">
         <table className="table table-hover table-dark">
           <tbody>
             {restaurants.map((res) => (
               <tr key={res.id}>
                 ...
               </tr>
             ))}
           </tbody>
         </table>
       </div>
     );
   };
   

   或

   const RestaurantsList = ({ restaurants }) => {
     return (
       <div className="list-group">
         <table className="table table-hover table-dark">
           <tbody>
             {restaurants.map((res) => (
               <tr key={res.id}>
                 ...
               </tr>
             ))}
           </tbody>
         </table>
       </div>
     );
   };
   

在App 组件中，请确保您保持数组状态不变，因此children 中的restaurants 属性始终是有效数组，并且可以通过使用空数组[] 作为空字符串@987654344 上的初始状态进行映射@。

const [restaurants, setRestaurants] = useState([]);