Json表数据仅显示标题，但不显示表数据（已编辑）

Question

我有一个从api获取的json数据。

当我单击表数据时，它确实打开了一个新选项卡，在其中加载了我的symbol.js文件，但它没有显示表内容，只显示了表头。但是，如果我查看我的编译器，它确实会显示json数据。我不确定我在做什么错。任何帮助表示赞赏。

我的代码：（Stock.js）

     import React, { Component } from "react";
      import { Link } from "react-router-dom";
     import Symbols from "./Symbols";

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

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

  handleClick(symbol) {
    fetch(`http://131.181.190.87:3001/history?symbol=${symbol}`)
      .then((res) => res.json())
      .then((json) => {
        console.log(json);
        this.setState({
          isLoaded: true,
          symbolsname: json,
        });
      });
  }

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

  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>
          <Symbols fin={true} name={this.state.symbolsname} />

          <form className="form-for-table-search">
            Search symbol or industry: &emsp;
            <input
              type="text"
              value={this.state.search}
              onChange={this.updateSearch.bind(this)}
            />
            &emsp; &emsp;{" "}
            <button type="button" className="btn-submit">
              Search
            </button>
            <br />
          </form>
          <table border={2} cellPadding={1}>
            <thead>
              <tr>
                <th>Symbol</th>
                <th>Name</th>
                <th>Industry</th>
              </tr>
            </thead>

            <tbody>
              {filteredItems.map((item) => (
                <tr>
                  <Link to="/symbols">
                    <td
                      key={item.symbol}
                      onClick={() => this.handleClick(item.symbol)}
                    >
                      {item.symbol}
                    </td>
                  </Link>

                  <td key={item.name}>{item.name}</td>
                  <td key={item.industry}>{item.industry}</td>
                </tr>
              ))}
              }
            </tbody>
          </table>
        </div>
      );
    }
  }
}

感谢您的帮助。谢谢。

Symbol.js

import React, { Component } from "react";

export default class Symbols extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      items: [],
      isLoaded: false,
    };
  }

  componentDidMount() {
    fetch(this.props)
      .then((res) => res.json())
      .then((json) => {
        this.setState({
          isLoaded: true,
          items: json,
        });
      });
  }

  render() {
    console.log(this.props.name);
    var { isLoaded, items } = this.state;
    if (isLoaded) {
      return <div>Loading...</div>;
    } else {
      return (
        <table border={2} cellPadding={1}>
          <thead>
            <tr>
              <th>TimeStamp</th>
              <th>Symbol</th>
              <th>Name</th>
              <th>Industry</th>
            </tr>
          </thead>

          <tbody>
            {items.map((item) => (
              <tr>
                <td key={item.timestamp}>{item.timestamp}</td>
                <td key={item.symbol}>{item.symbol}</td>
                <td key={item.name}>{item.name}</td>
                <td key={item.industry}>{item.industry}</td>
              </tr>
            ))}
            }
          </tbody>
        </table>
      );
    }
  }
}

这是我的网页的屏幕截图：

而且，当我单击链接时，它的确显示了表头，但没有内容

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，将名称作为prop传递给新页面组件，并在安装时获取该组件。