react更新状态 onChange 奇怪的行为

IT技术 reactjs
2021-05-11 07:20:26

我正在构建一个与Pokeapi相结合的基本react应用程序 。每当用户在我的 pokedex 的输入字段中输入一些东西时，我想更新状态然后 (onSubmit) 在 Pokeapi 中找到这个 pokemon。

每当我记录状态（在状态更新函数中）时，它都会记录输入字段中输入的状态 -1 字符。

结果的打印屏幕

组件片段：

import React, { Component } from 'react';

export default class Pokedex extends Component {
    constructor(props) {
        super(props);
        this.state = {
            pokemon: "",
            result: {}
        }
    }
    setPokemon(value) {
        this.setState({
            ...this.state.pokemon,
            pokemon: value.toLowerCase()
        });
        console.log(this.state.pokemon);
    }
    render() {
        return (
            <div className="container-fluid">
                <div className="pokedex row">
                    <div className="col-half left-side">
                        <div className="screen"/>
                        <div className="blue-button"/>
                        <div className="green-button"/>
                        <div className="orange-button"/>
                    </div>
                    <div className="col-half right-side">
                        <input type="text" placeholder="Find a pokemon" onChange={(e) => this.setPokemon(e.target.value)}/>
                    </div>
                </div>
            </div>
        )
    }
}

为什么会发生这种情况？

2个回答

setState是一个异步函数。这意味着console.log立即使用aftersetState将打印最后一个state值。如果您想查看最新更新的值，则将回调传递给这样的setState函数

setPokemon(value) {
    this.setState({pokemon: value.toLowerCase()},
    () => console.log(this.state.pokemon));
}

第一种方法可以直接在输入中设置 pokemon 的状态。

<input type="text" placeholder="Find a pokemon" onChange={(e) => this.setState({ pokemon:e.target.value }) }/>

删除功能集口袋妖怪。

 setPokemon(value) {
        this.setState({
            ...this.state.pokemon,
            pokemon: value.toLowerCase()
        });
        console.log(this.state.pokemon);
    }

没有理由使用扩展运算符，如果您确实想使用 setter，您只需要做的就是，

setPokemon = (value) => {
 this.setState({ pokemon:value })
}

但即便如此，第一种方式更好。

还有 

setPokemon = (e) => {
     this.setState({ pokemon:e.target.value })
    }

然后在输入 <input onChange={this.setPokemon()} />

其它你可能感兴趣的问题
上一篇带有上下文和react-hooks的测试组件 下一篇如何从 reactjs 的另一个module导出状态