** setState **在两个函数中不起作用（仅一个setState起作用）

Question

我正在使用React js。我正在尝试setState的值。

首先调用的函数是symbolsname，它从api和调用componentDidMount()方法并以表格形式在网页上显示数据。

现在在该表中，当您单击表数据render()时，它将symbol值发送到item.symbol功能。现在，我想将handleClick()的状态设置为在第二个symbolsname中从api获取的json数据，但是handleclick()中的symbolsname: json的值未设置，并且该值等于setstate有什么办法可以使它工作？

这是我的代码：

undefined

[另外，我想做的就是当我从

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: [],
      isLoad: false,
    };
  }

  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); //it prints the data here

        this.setState({
          isLoad: true,
          symbolsname: json, //does not set the value here and is undefined
        });
      });
  }


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

          items: json,
        });
      });
  }

  render() {
    console.log(this.state.symbolsname);

    console.log(this.state.items);
    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 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="/symbol">
                    <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>
          <Symbols name={this.state.symbolsname} />;
        </div>
      );
    }
  }
}

函数中的第二个api获取数据时，我只想以表格形式在网页上显示该数据。但是handleclick()的值未设置为json数据，而是symbolsname，因此我无法在网页上显示数据。任何帮助表示赞赏。

Answer 1

您在此代码段中的undefined不正确。

handleClick

const handleClick = (symbol) => {
    fetch(`http://131.181.190.87:3001/history?symbol=${symbol}`)
      .then((res) => res.json())
      .then((json) => {
        console.log(json); //it prints the data here

        this.setState({
          isLoad: true,
          symbolsname: json, //does not set the value here and is undefined
        });
      });
  }

您将必须执行

<tbody>
              {filteredItems.map((item) => (
                <tr>
                  <Link to="/symbol">
                    <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>

等操作>