在reactjs中添加到json对象的链接

Question

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

  Name | Age
   A      20
   B.     25

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

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

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

所以，当我点击一个，它应该会把我发送到另一个网址，在那个网页上，我应该能够看到(我刚刚被发送到的api网址)在表格中提取的数据。

我的代码:

     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

您可以动态地创建您的点击处理程序来传递您需要的信息，以创建用于获取的url。大概是这样的:

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路由器，您可以使用重定向或历史记录将数据传递给您的显示表组件。或者，您可以在表单元格中呈现链接，将名称作为道具传递给新页面组件，并让该组件在挂载时获取。