时间戳

首页 > 解决方案 > 通过路线传递道具

javascript - 通过路线传递道具

问题描述

// App.js

import React from 'react'

function wate() {
let singleEpisode = {}
const [episodes, setEpisodes] = useState([])
const [singleEpi, setSingleEpic] = useState(singleEpisode)

const searchEpisode = (e) => {
    e.preventDefault(e)
    const { id, name, air_date, episode } = episodes[index]
    setSingleEpic({
      id: id,
      name: name,
      air_date: air_date,
      episode: episode
    })
return (
    <React.Fragment>
    <Router>
      <NavBar searchEpisode={searchEpisode} searchIt={searchIt} />
      <Switch>
        <Route path='/displayepisode' render={(props) => <DisplayEpisode {...props} epics={singleEpi} />} />
      </Switch>
    </Router>
  </React.Fragment>
)
}
export default wate

// DisplayEpisode.js

import React from 'react'

function DisplayEpisode(props) {
const { id, name, air_date, episode } = props
console.log(props.epics)}

export default DisplayEpisode

Episodes 有一个超过 40 个对象的数组，具体取决于我正在破坏的索引值 id、name、air_date、episode。现在我需要将这些值设置为 singleEpic 作为对象并将 singleEpic 传递给子组件并解构它们并使用它。

标签： javascriptreactjs

解决方案

您设置状态错误。您需要将适当的对象传递给 setSingleEpic 方法。

setSingleEpic({
      id: id,
      name: name,
      air_date: air_date,
      episode: episode
     }
    )

推荐阅读