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

Question

我正在使用 API Values primaryKey 来更改 Click 上表示的数据，但 function 似乎不起作用。 并且没有错误被抛出。 我找不到这里出了什么问题。

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

    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;

Answer 1

 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>