javascript - 无法使用用户输入刷新文本框状态，尽管使用 setState，但仍保持默认状态

Question

我有一个 React 文件，它将城市数据列表显示为一个组件。上面有一个输入文本框，需要接受用户输入。我正在使用状态在文本框中显示初始字符串，但我无法通过 onChange 成功使用函数来设置状态。使用 console.log 对其进行故障排除我可以看到，当我尝试更改状态时，我使用 onChange 指向的函数确实有效并更改了一个字母，但随后状态又恢复为默认值。问题似乎在于 setState 没有保存更改并在进行任何更改后恢复到初始状态。文本框内容似乎根本没有改变，认为 console.log 显示一个字母的变化，但随后又恢复到原始状态。

我如何更新状态？我希望用户能够输入一个数字，然后将其与列表进行比较。

import React, {Component} from 'react';
import Table from './Table';
import cities from './Cities';


class App extends Component {

state = {
    userInput: "Your City Population"
}


popChanger = (event) => {
    this.setState( {userInput: event.target.value} );
    //console.log(event.target.value);
}

yourCity = (
    <div>
        <input 
            type='text' 
            onChange={this.popChanger}
            value={this.state.userInput}
            />
    </div>
)


render() {



    return (

        <div className = "App">
            {this.yourCity}
            <Table characterData = {cities} />
        </div>
    );
}
}

export default App;

标签： javascriptreactjs

Answer 1

状态正在更新，但您看不到，因为this.yourCity不会重新渲染

popChanger = (event) => {

    this.setState( {userInput: event.target.value} );
    console.log(event.target.value);
}

yourCity(){
  return <div>
        <input 
            type='text' 
            onChange={this.popChanger}
            value={this.state.userInput}
            />
    </div>
}


render() {



    return (

        <div className = "App">
            {this.yourCity()}

        </div>
    );
}
}