使用API值作为道具来更改React中的状态

samar2170

我正在使用API值primaryKey更改Click上表示的数据，但该功能似乎无法正常工作。并且不会引发任何错误。我无法在这里找到问题所在。

我在这里想要做的是-默认情况下，表格输出的每只股票都具有多列，单击按钮时，它应该使用该股票的键值来仅代表具有该列的那只股票。这是我的部分代码：

    handleClick = (props) => {
        return (
            <div>
                {this.state.data.filter(data => data.includes({props})).map(filteredData => (
                    <li>
                    {filteredData}
                    </li>
            ))};
            </div>
        );
    }
    renderArray = () => {
        return (
            <table className="table">
                <thead>
                    <tr>
                        <th>Name</th>
                        <th>Price</th>
                        <th>Price/ Chng</th>
                        <th>Mkt Cap</th>
                        <th>Volume</th>
                        <th>Turnover</th>
                    </tr>
                </thead>
                <tbody>
                    {this.state.data.map(item => {
                        return (
                            <tr key={item.co_S}>
                                <button onCLick={this.setState = () => this.handleClick(item.co_S)}><td >{item.co_N}</td></button>
                                <td>{item.price}</td>
                                <td>{item.p_chng_pc}</td>
                                <td>{item.Mkt_cap}</td>
                                <td>{item.volume}</td>
                                <td>{item.volume * item.price}</td>
                            </tr>
                        );
                    })};
                    
                </tbody>
            </table>
        );
    }
    render() {
        return (
            <this.renderArray />
        )
    }
}

export default StocksHomePage2;

穆罕默德·伊利亚斯

class App extends React.Component {
  state = {
    data: [
      {
        co_S: 1,
        co_N: 1,
        price: 100,
        volume: 20,
      },
      {
        co_N: 2,
        co_S: 2,
        price: 30,
        volume: 7,
      },
    ],
  };

  handleClick = (props) => {
    this.setState({
      data: this.state.data.filter((item) => item.co_S === props),
    });
  };

  renderArray = () => {
    return (
      <table className="table">
        <thead>
          <tr>
            <th>Name</th>
            <th>Price</th>
            <th>Price/ Chng</th>
            <th>Mkt Cap</th>
            <th>Volume</th>
            <th>Turnover</th>
          </tr>
        </thead>
        <tbody>
          {this.state.data.map((item) => {
            return (
              <tr key={item.co_S}>
                <button onClick={() => this.handleClick(item.co_S)}>
                  <td>{item.co_N}</td>
                </button>
                <td>{item.price}</td>
                <td>{item.p_chng_pc}</td>
                <td>{item.Mkt_cap}</td>
                <td>{item.volume}</td>
                <td>{item.volume * item.price}</td>
              </tr>
            );
          })}
          
        </tbody>
      </table>
    );
  };
  render() {
    return this.renderArray();
  }
}

ReactDOM.render(<App />, document.getElementById("root"));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div id="root"></div>

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。