无法读取未定义反应挂钩的属性“位置”

Posted 2023-02-22

【中文标题】无法读取未定义反应挂钩的属性“位置”

【英文标题】：Can't read property 'location' of undefined react hooks

【发布时间】：2021-03-14 17:38:07

【问题描述】：

我已从 API 获取数据，但现在单击艺术家姓名时会显示详细信息页面。就在我重新加载页面时，详细信息会闪烁并重新呈现并消失

我决定在 App.js 组件中获取，在那里构建路由并将 props 传递给子组件

    function App() 
  const url = `http://ws.audioscrobbler.com/2.0/?method=chart.gettoptracks&api_key=KEY&format=json`
    const [trackList, setTrackList]  = useState([])
    useEffect(() => 
        loadData()
    , [])
    const history = createMemoryHistory()
    const loadData = async () => 
            const res = await fetch(url)
            const data = await res.json()
            setTrackList(data.tracks.track)
            console.log(data.tracks.track)
    
  return (
    <div>
   <Router>
        <NavBar />
        <Route path="/" render=(props) => <TrackList trackList=trackList />/>
        <Route path="/artist/:name" render=(props) => <TrackListDetails trackList=trackList /> />      
   </Router>
    </div>
  );

在 TrackList 组件中，我使用道具显示数据。 常量 TrackList = (trackList) =>

    return (
        <div>
           <Container>
              <h1 className='mb-5 mt-5'>Top TrackList</h1>
             
                trackList.map(item => 
                    return (
                        
                        <Row className='mt-1' style=padding: '5px', border: '1px solid #000', display: 'flex', justifyContent: 'flex-start', alignItems: 'center'>
                        <Col lg=1 md=1 sm=1>
                        <a href=item.artist.url><img src=item.image[1]['#text'] /></a>
                            
                        </Col>
                        <Col lg=11 md=11 sm=11>
                         
                        <Link to=`/artist/$item.artist.name`><h6>item.artist.name</h6></Link>
                        <p>"item.name"</p>
                        </Col>
                        </Row>
                       

                    )
                )
                             
          </Container>
        </div>
    )

并在详细信息中显示组件信息。 a sec 并用 tracklist 重新渲染主页

const TrackListDetails = ( trackList ) => 
    const  name  = useParams();

    const history = useHistory();
    const location = useLocation();

        const targetArtist = trackList.find(item => item.name === name);
        console.log('props', name)
    
     
    return (
        <Container>
            <Row>
                <Col>
            
                    <h4>Singer name: </h4>
                
                                <h1>name</h1>
             
            
                  
                    <h4>Description </h4>
                </Col>
            </Row>
            <Row>
            <button onClick=() => history.goBack()  >Go to home</button>
            </Row>
        </Container>
        
    )

【参考方案1】：

OMG 愚蠢的错误。一切正常。只需将确切添加到 Route ！

 <Router>
     
        <NavBar />
        
        <Route exact path="/" render=(props) => <TrackList trackList=trackList />/>
        <Route exact path="/artist/:name" render=(props) => <TrackListDetails trackList=trackList /> />      
   </Router>

现在它可以正常工作了！