反应更新状态 onChange 奇怪的行为答案

【问题标题】：React updating state onChange strange behaviour反应更新状态 onChange 奇怪的行为
【发布时间】：2018-08-19 17:30:06
【问题描述】：

我正在构建一个结合Pokeapi 的基本反应应用程序。每当用户在我的 pokedex 的输入字段中输入内容时，我都想更新状态以便（onSubmit）在 Pokeapi 中找到这个 pokemon。

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

Printscreen of result

组件片段：

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>
        )
    }
}

为什么会这样？

【问题讨论】：

标签： reactjs

【解决方案1】：

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

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

【讨论】：

【解决方案2】：

第一种方式你可以直接在input里面设置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()} />

【讨论】：

你是对的。扩展运算符在这里不是必需的。但是为什么会发生这种行为呢？另外，你的方式不就是与罗马不同的方式吗？因为在使用您提供的示例时，我仍然会得到与上图相同的“奇怪行为”。