Question

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

每当我记录状态（在状态更新函数中）时，它会记录输入字段中输入的状态-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>
        )
    }
}

为什么会这样？

Answer 1

console.log是一个异步函数。这意味着在setState之后立即使用state将打印最后setState值。如果您想查看最新的更新值，请将回调传递给setPokemon(value) { this.setState({pokemon: value.toLowerCase()}, () => console.log(this.state.pokemon)); }函数，如下所示

cat yourfile.txt | fold -w 128

Answer 2

这第一种方法可以直接在输入中设置口袋妖怪的状态。

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

删除功能集pokemon。

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

没有理由使用点差运算符，如果你想使用setter，你只需要做的就是，

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

但即使这样，第一种方式也会更好。

Theres也

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

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

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

2 个答案: