将数据传递给另一个组件 OnClick

IT技术 javascript reactjs react-router react-hooks
2021-04-26 02:04:59

所以，在路由和管理我的数据时，我遇到了一些问题。

该Listing组件本质上是大量带有电影数据的卡片，我从我的要点中获取这些数据。我为每张卡片创建了一个组件，.map并将值添加到props中。

我的目标：当我单击任何卡片的按钮时，我想转到一个页面并动态访问该电影卡片的名称。

例如：：假设我点击了一个按钮，上面写着一张特定电影卡的“更多信息”。我被路由到 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>
  )
}
2个回答

您需要创建一个路由来显示传递的数据。例如

<Route path="/movieInfo/:name" exact component={MoreInformation} />

在您的列表中创建指向更多信息组件的链接

<Link to={`/movieInfo/${this.props.name}`}>More info</Link>

在您的 MoreInformation 组件中访问props，如

const { name } = this.props;

简单的演示在这里

如果您正在使用功能组件，您可以检索该值，如下所示。内部匹配参数。

function MoreInformation(props) {

  const name = props.match.params.name;

  return <h1>{name}</h1>;
}

您可以使用带有 HTML 5 元素的 JS 在会话 ( 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用来存储信息，但请注意，它仅在使用相同的窗口/选项卡时才有效，因此请确保您的按钮或链接的target值设置为_self。

您可以在此处阅读有关使用 JavaScript 在没有 cookie 的情况下存储数据的信息

有关 Web Storage API 的信息：https : //developer.mozilla.org/en-US/docs/Web/API/Web_Storage_API

有关 PersistJS 的信息（您可能会感兴趣）：https : //github.com/jeremydurham/persist-js

其它你可能感兴趣的问题
上一篇为什么打印速度在特定高度会发生变化？（使用 Ultimaker Cura 切片机） 下一篇'children' 未定义 - 在 React 类组件中