Question

我想要实现的细节：

从Pokemon API中获取数据并呈现一些小宠物（来自API的响应是口袋妖怪的NAME和URL，这导致了一个关于该口袋妖怪的详细信息的终点。我能够获取并接收响应当前正在使用array.map()组件形式的<li>方法在页面上呈现。
在每个<li>上创建一个click事件，以返回该元素的索引。目标是将此索引传递给另一个组件，其中根据此元素的索引进行另一个获取请求。例如。如果用户点击口袋妖怪“A”，那么我用“A”命中API以检索口袋妖怪“A”细节并将其渲染到页面上。

我的问题是onClick功能无法正常执行。我必须两次点击<li> Pokemon </li>才能获得该元素的索引。

class PokemonList extends Component {
    constructor () {
        super();
        this.state = {
            currPoke: null,
        }
    }    

    pokeClicked(index){
        console.log('poke got clicked-->', this.state.currPoke);
        this.setState({
            currPoke: index+1,
        }) 

         console.log('after set state', this.state.currPoke);
    }    
    render () {
        return(
               <div className="list">     
                    <ul>
                        {this.props.apiData.map((p, index) => {
                            return <li onClick={()=>{this.pokeClicked(index)}} key={index}>{p.name.charAt(0).toUpperCase() + p.name.slice(1)}</li>
                        })}
                    </ul>
                    <div className="lis">
                        {this.renderClickedPoke()}
                    </div>
                </div>
            )
        }

Answer 1

setState是一种异步方法（请查看documentation）。这就是为什么在设置之后记录你的状态还没有反映你对它所做的改变。要在实际发生变化时查看更改，您可以提供回调作为setState

的第二个参数

this.setState({
  currPoke: index+1,
}, () => { console.log(this.state.currPoke) })

您的代码按预期工作：）

按下一次后，onClick不会改变状态

1 个答案: