List.jsx：12 未捕获的类型错误：无法读取 null 的属性(读取"目标")

Question

实际上我是新手，无法做出反应，所以我很难解决这个错误。我正试图通过使用"/酒店"；但当我输入这个时，它显示了我在下面提到的错误，我也尝试设置目的地的值，但它不起作用。但在/hotels之后，我也给出了id的路径，所以/hotels/id运行良好，但/hotels不运行，显示空白页和错误。

App.js

import { BrowserRouter, Routes, Route } from 'react-router-dom';
import Home from './pages/home/Home';
import List from './pages/list/List';
import Hotel from './pages/hotel/Hotel';
function App() {
return (
<BrowserRouter>
<Routes>
<Route path='/' element={<Home />} />
<Route path='/hotels' element={<List />} />
<Route path='/hotels/:id' element={<Hotel />} />
</Routes>
</BrowserRouter>
);
}
export default App;

List.js

import './list.css';
import Navbar from '../../components/navbar/Navbar';
import Header from '../../components/header/Header';
import { useLocation } from 'react-router-dom';
import { useState } from 'react';
import { format } from 'date-fns';
import { DateRange } from 'react-date-range';
import SearchItem from '../../components/searchItem/SearchItem';
const List = () => {
const location = useLocation();
const [destination, setDestination] = useState(location.state.destination);
const [date, setDate] = useState(location.state.date);
const [openDate, setOpenDate] = useState(false);
const [options, setOptions] = useState(location.state.options);
return (
<div>
<Navbar />
<Header type='list' />
<div className='listContainer'>
<div className='listWrapper'>
<div className='listSearch'>
<h1 className='lsTitle'>Search</h1>
<div className='lsItem'>
<label>Destination</label>
<input placeholder={destination} type='text' />
</div>
<div className='lsItem'>
<label>Check-in Date</label>
<span onClick={() => setOpenDate(!openDate)}>{`${format(
date[0].startDate,
'MM/dd/yyyy'
)} to ${format(date[0].endDate, 'MM/dd/yyyy')}`}</span>
{openDate && (
<DateRange
onChange={(item) => setDate([item.selection])}
minDate={new Date()}
ranges={date}
/>
)}
</div>
<div className='lsItem'>
<label>Options</label>
<div className='lsOptions'>
<div className='lsOptionItem'>
<span className='lsOptionText'>
Min price <small>per night</small>
</span>
<input type='number' className='lsOptionInput' />
</div>
<div className='lsOptionItem'>
<span className='lsOptionText'>
Max price <small>per night</small>
</span>
<input type='number' className='lsOptionInput' />
</div>
<div className='lsOptionItem'>
<span className='lsOptionText'>Adult</span>
<input
type='number'
min={1}
className='lsOptionInput'
placeholder={options.adult}
/>
</div>
<div className='lsOptionItem'>
<span className='lsOptionText'>Children</span>
<input
type='number'
min={0}
className='lsOptionInput'
placeholder={options.children}
/>
</div>
<div className='lsOptionItem'>
<span className='lsOptionText'>Room</span>
<input
type='number'
min={1}
className='lsOptionInput'
placeholder={options.room}
/>
</div>
</div>
</div>
<button>Search</button>
</div>
<div className='listResult'>
<SearchItem />
<SearchItem />
<SearchItem />
<SearchItem />
<SearchItem />
<SearchItem />
<SearchItem />
<SearchItem />
<SearchItem />
</div>
</div>
</div>
</div>
);
};
export default List;

and the errors are 

Uncaught TypeError: Cannot read properties of null (reading 'destination')
at List (List.jsx:12:1)
at renderWithHooks (react-dom.development.js:16305:1)
at mountIndeterminateComponent (react-dom.development.js:20074:1)
at beginWork (react-dom.development.js:21587:1)
at beginWork$1 (react-dom.development.js:27426:1)
at performUnitOfWork (react-dom.development.js:26557:1)
at workLoopSync (react-dom.development.js:26466:1)
at renderRootSync (react-dom.development.js:26434:1)
at recoverFromConcurrentError (react-dom.development.js:25850:1)
at performConcurrentWorkOnRoot (react-dom.development.js:25750:1

Answer 1

正如您提到的location.state.destination，我希望路由是使用useNavigate以编程方式完成的，并且您正在发送数据。

const [destination, setDestination] = useState(location.state.destination);

确保你发送的数据像这个

navigate('/hotels',{state:{location:"USA",date:xyz,options:{}}});

Answer 2

之所以会发生这种情况，是因为您试图直接转到/hotels页面，而不向搜索框提供任何输入。使用搜索框值初始化状态值时，应填写搜索框，然后使用搜索按钮转到/酒店页面。