在 react js 中添加指向 json 对象的链接

Posted 2023-02-22

【中文标题】在 react js 中添加指向 json 对象的链接

【英文标题】：add link to json object in react js

【发布时间】：2020-08-25 01:09:16

【问题描述】：

我有一个从 api 获取的 json 数据。假设表格是（下表只是一个例子）

  Name | Age
   A      20
   B.     25

现在我正在从 api 中获取姓名和年龄内容并将其显示为表格格式（我正在使用 React js）现在，我想让 A 和 B 等姓名的内容可点击。 当我单击 A 时，它应该将我链接到另一个 api url（这里的问题是每个名称对象的 api url 都不同） 所以，用于

的api

A = http://example/name?=A 
B = http://example/name?=B

现在，我如何将我的名称对象内容（A，B）链接到 api（url）并使其获取数据并在另一个页面上显示为表格。

因此，当我单击 A 时，它应该将我发送到另一个 url，并且在该网页上，我应该能够以表格形式看到（我刚刚发送到的那个 api url）的获取数据。

我的代码：

     import React,  Component  from "react";

    export default class Stocks extends Component 
  constructor(props) 
    super(props);
    this.state = 
      items: [],
      isLoaded: false,
      search: "",
    ;
  

  updateSearch(event) 
    this.setState( search: event.target.value );
  

  componentDidMount() 
    fetch("http://131.181.190.87:3001/all")
      .then((res) => res.json())
      .then((json) => 
        this.setState(
          isLoaded: true,
          items: json,
        );
      );
  

  render() 
    let filteredItems = this.state.items.filter((item) => 
      return (
        item.symbol.toUpperCase().indexOf(this.state.search.toUpperCase()) !==
          -1 || item.industry.indexOf(this.state.search) !== -1
      );
    );
    var  isLoaded, items  = this.state;
    if (!isLoaded) 
      return <div>Loading...</div>;
     else 
      return (
        <div>
          <form className="form-for-table-search">
            SelectSymbol: &emsp;
            <input
              type="text"
              value=this.state.search
              onChange=this.updateSearch.bind(this)
            />
            &emsp; &emsp;" "
            <button type="button" className="btn-submit">
              Search
            </button>
            <br />
            &emsp; Industry: &emsp; &emsp; &emsp;
            <input
              type="text"
              value=this.state.search
              onChange=this.updateSearch.bind(this)
            />
            <button type="button" className="btn-submit">
              Search
            </button>
            &emsp; &emsp; History of Symbol and date : &emsp; &emsp; &emsp;
            <input
              type="text"
              value=this.state.search
              onChange=this.updateSearch.bind(this)
            />
            &emsp; &emsp;
            <button type="button" className="btn-submit">
              Search
            </button>
          </form>
          <table border=2 cellPadding=1>
            <thead>
              <tr>
                <th>Symbol</th>
                <th>Name</th>
                <th>Industry</th>
              </tr>
            </thead>

            <tbody>
              filteredItems.map((item) => (
                <tr>
                  <td key=item.symbol>item.symbol</td>
                  <td key=item.name>item.name</td>
                  <td key=item.industry>item.industry</td>
                </tr>
              ))
              
            </tbody>
          </table>
        </div>
      );
    
  

感谢任何帮助。谢谢。

【参考方案1】：

您可以动态创建您的点击处理程序，以传递您创建获取网址所需的信息。像这样的：

handleClick = name => 
    fetch(`http://example.com/name?=$name`).then((data) => 
        // handle redirect to new page
    )

<td key=item.name onClick=() => handleClick(item.name)>item.name</td>

如果不了解您的应用程序的设置方式，我无法正确回答如何重定向到您的新页面。

如果您使用的是 React Router，您可以使用 Redirect 或 history 将数据传递给您的显示表格组件。或者，您可以改为在表格单元格中呈现Link，将名称作为道具传递给新页面组件，并在挂载时获取该组件。

【讨论】：

好吧，我试过了，我能够获取数据。我想知道如何将这些数据传递给另一个类？所以我可以在我的网页上输出表格。

就像我上面说的，在我回答这个问题之前，我需要更多地了解您的应用程序的结构以及您打算在哪里渲染显示数据的组件

嗯，我的应用程序是一个股票应用程序，它从 api 获取数据并以表格的形式显示。我可以像你说的那样获取 api，我需要将它传递给现在说 symbol.js 类（因为现在它显示在 stock.js 类的控制台中）并将我们收到的 json 数据渲染到那个 symbol.js 页面.所以，现在当我们通过它访问 http://..../symbol.js 时，它应该在其正文中以表格形式显示所有数据（这里的数据是我们在您的示例中获取的数据，现在我只是显示它在stocks.js 类的控制台中）。它应该以某种方式将数据传递给 symbol.js 类

而且，当我点击 item.name （表格数据）时，它应该将我发送到 symbol.js 类，当我登陆该页面时，它应该显示 json 数据（我在最后的评论中解释）

如果你还没有实现任何类型的路由，我建议在你的项目中包含 React Router，在 '/symbol' 或（无论你想在地址栏）呈现您的表格组件，并使用我在上面的答案中提到的历史记录功能重定向到该路由并使用历史记录的状态对象将数据传递给组件。