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

Question

我有一个从 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>
      );
    }
  }
}

感谢任何帮助。谢谢。

Answer 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，将名称作为道具传递给新页面组件，并在挂载时获取该组件。