javascript - 为什么我不能将我的道具发送到组件？

问题描述

我有一个使用 React Router 保存我所有路由的文件。我还有一个仪表板组件，我在其中执行 GET 请求以获取数据库中所有餐厅预订的列表。我正在尝试创建另一个名为 SeatReservation 的组件，我可以在其中单击列出的预订并为其分配一个 ID，因此它会显示为已占用。

路由.js

function Routes() {
  return (
    <Switch>
      <Route exact={true} path='/'>
        <Redirect to={'/dashboard'} />
      </Route>
      <Route exact={true} path='/reservations'>
        <Redirect to={'/dashboard'} />
      </Route>
      <Route path='/dashboard'>
        <Dashboard date={today()} />
      </Route>
      <Route path='/reservations/new'>
        <ReservationForm />
      </Route>
      <Route path='/tables/new'>
        <TablesForm />
      </Route>
      <Route path='/reservations/:reservationId/seat'>
        <SeatReservation />
      </Route>
      <Route>
        <NotFound />
      </Route>
    </Switch>
  );
}

这当然会将我带到正确的 URL 和一个新页面。

仪表板.js

function Dashboard({ date }) {
  const [reservations, setReservations] = useState([]);
  const [reservationsError, setReservationsError] = useState(null);
  const [table, setTable] = useState([]);
  let location = useLocation();

  // Grab the query string to check what day is is
  const params = useQuery();
  const queryDate = params.get('date');

  // Format today's date so we can compare it to query string
  let today = new Date();
  let day = String(today.getDate()).padStart(2, '0');
  let month = String(today.getMonth() + 1).padStart(2, '0');
  let year = today.getFullYear();
  today = `${year}-${month}-${day}`;

  useEffect(loadDashboard, [date]);

  function loadDashboard() {
    const abortController = new AbortController();
    setReservationsError(null);
    listReservations({ date }, abortController.signal)
      .then(setReservations)
      .catch(setReservationsError);
    return () => abortController.abort();
  }

  useEffect(() => {
    const getAllTables = async () => {
      const response = await fetch('http://localhost:5000/tables');

      const tablesFromAPI = await response.json();
      setTable(tablesFromAPI);
    };
    getAllTables();
  }, []);

  return (
    <main className='container' style={{ maxWidth: '600px' }}>
      <h1>Dashboard</h1>
      <div>
        {/* <h4 className='mb-0'>Reservations for date: {date}</h4> */}

        {queryDate === today || queryDate === null ? (
          <DashboardList
            reservations={reservations}
            setReservations={setReservations}
            date={date}
          />
        ) : (
          <DashboardRes
            date={date}
            reservations={reservations}
            setReservations={setReservations}
            reservationsError={reservationsError}
            setReservationsError={setReservationsError}
          />
        )}
        <Seat table={table} setTable={setTable} />
        {location.pathname ===
          `/reservations/${reservations.reservation_id}/seat` && (
          <SeatReservation table={table} setTable={setTable} />
        )}
      </div>
      <ErrorAlert error={reservationsError} />
      {/* {JSON.stringify(reservations)} */}
    </main>
  );
}

我设置了一个条件来检查它是否在主路由上（在这种情况下，它正在寻找 /reservations/:reservationId/seat），以便组件不会自动显示。

但是，无论我做什么，每当我将道具传递给时<SeatReservation />，它都会说它是未定义的。

我不能使用<SeatReservation />两次，还是我错误地传递了道具？

标签： javascriptreactjs

import { useLocation } from "react-router-dom"; ... let location = useLocation(); return ( <main className='container' style={{ maxWidth: '600px' }}> <h1>Dashboard</h1> <div> ... {location.pathname === `/reservations/${reservations.reservation_id}/seat` && ( <SeatReservation table={table} setTable={setTable} /> )}

javascript - 为什么我不能将我的道具发送到组件？

问题描述

解决方案

推荐阅读