因此,在路由和管理数据时,我遇到了一个问题。
Listing
组件本质上是一堆卡片,这些卡片包含我从我的要旨中获取的电影数据。我使用.map
为每张卡创建了一个组件,并将其值添加到道具。
我的目标:当我单击任意一张卡的按钮时,我想转到页面并动态访问该电影卡的名称。
例如:
假设我单击一个特定电影卡的“ MoreInformation”按钮。我被路由到MoreInformation页面,因为该按钮将包含在Link
中。
在MoreInformation页面/组件中,我要动态添加:
<h1>{name}</h1>
这只是我要完成的工作的一个基本示例,但是换句话说,我如何将特定电影卡的数据传输到MoreInformation页面,以便我可以访问它以添加动态数据。
如果能收到反馈,我将非常感激,因为该项目对时间敏感...谢谢大家。
const MoviesPage = () => {
const [movies, setMovies] = useState([])
useEffect(() => {
axios
.get(
`https://gist.githubusercontent.com/ernestosotelo/9932c659b460e5ddeec8a8ae76164a0d/raw/ce8d7b248f61e73bf3c767538728505d6bac9835/json`
)
.then(res => {
const data = res.data
setMovies(data)
})
}, [])
return (
<Layout>
<div style={{ background: "hsl(215, 100%, 3%" }}>
<TopThree />
<p style={{ color: "#e0dfe2", fontSize: "1.7rem", marginTop: "3rem" }}>
<b
style={{
padding: ".5rem 1.5rem .5rem 1.5rem",
background: "#f9ba00",
fontSize: "2rem",
marginLeft: "4rem",
color: "black"
}}
>
!
</b>{" "}
Click 'Remove' to remove movies you definitely will not watch! There
is an undo option.
</p>
<div className={listingCSS.block}>
{movies.map(movie => {
return (
<Listing
key={movie.name}
name={movie.name}
plot={movie.plot}
date={movie.releaseDate}
genre={movie.genre}
imdbRating={movie.imdbRating ? movie.imdbRating : "N/A"}
tomatoRating={movie.tomatoRating ? movie.tomatoRating : "N/A"}
metaRating={movie.metaRating ? movie.metaRating : "N/A"}
erbertRating={movie.erbertRating ? movie.erbertRating : "N/A"}
tmdbRating={movie.tmdbRating ? movie.tmdbRating : "N/A"}
movshoRating={movie.movshoRating}
streamOn={movie.streamOn}
poster={movie.poster}
alt={movie.name}
/>
)
})}
</div>
</div>
</Layout>
)
}
答案 0 :(得分:1)
您需要创建一条路由来显示传递的数据。例如
<Route path="/movieInfo/:name" exact component={MoreInformation} />
在您的清单中创建指向更多信息组件的链接
<Link to={`/movieInfo/${this.props.name}`}>More info</Link>
在MoreInformation组件中,访问道具,例如
const { name } = this.props;
如果使用功能组件,则可以检索值,如下所示。内部比赛参数。
function MoreInformation(props) {
const name = props.match.params.name;
return <h1>{name}</h1>;
}
答案 1 :(得分:0)
您可以将JS与HTML 5元素一起使用,以将数据存储在会话(sessionStorage.getItem() and sessionStorage.setItem()
)或本地(localStorage.getItem() and localStorage.setItem()
)上。
如果您希望通过变量将数据存储在setItem
上:
var session_data = sessionStorage.myValue //For session only
var local_data = localStorage.myValue //For local
sessionStorage.myValue = 'value' //For session only
localStorage.myValue = 'value' //For local
还请记住::要存储JavaScript对象,您应该设置并将其更改为字符串值:
sessionStorage.myObject = JSON.stringify(myObject); // Setting the object to a string
使用getItem
时将其解析回对象以检索数据:
var myObject = JSON.parse(sessionStorage.myObject); // Parsing JSON back from string to object
也可以::您可以使用window.name
来存储信息,但是请注意,该信息仅在使用相同的窗口/标签时才有效,因此请确保您的按钮或链接具有{{ 1}}的值设置为target
。
您可以阅读有关使用JavaScript HERE
存储没有cookie的数据的信息。有关Web存储API的信息:https://developer.mozilla.org/en-US/docs/Web/API/Web_Storage_API
有关PersistJS的信息(您可能会感兴趣):https://github.com/jeremydurham/persist-js