Reactjs 调用setState后，React状态不会更改

我对反应和试图理解国家的概念相当陌生。我试图拥有一组输入字段，就像终端一样，一个接一个

页面组件如下所示

import React, { Component } from "react";
import NewLine from "./newLine";

export class Page extends Component {
    state = {
        numberOfLine: 0,
        lines: [{ value: "", id: 0 }]
    };

    render() {
        return (
            <div className="container">
                <div className="terminal">
                    <p className="prompt">
                        Hey there! This is a pre rendered line.
                    </p>
                    {this.state.lines.map(l => (
                        <NewLine
                            key={this.state.numberOfLine}
                            handelWhatever={this.handelWhatever}
                            line={l}
                        ></NewLine>
                    ))}
                </div>
            </div>
        );
    }



    handelWhatever = (string_value, LId) => {
        console.log(string_value, lId);
        this.setState(
            {
                lines: [
                    ...this.state.lines.filter(line => line.id !== lId),
                    { value: string_value, id: lId}
                ]
            },
            () => this.handleClick()
        );
    };

    // Adding a new line after a click 
    handleClick = event => {
        const num = this.state.numberOfLine + 1;
        this.setState({
            numberOfLine: num,
            lines: [...this.state.lines, { value: "", id: num }]
        });
    };
}

export default Page;

import React, { Component } from "react";

export class NewLine extends Component {
    state = {
        id: this.props.line.id,
        value: this.props.line.value,
        displayInput: true
    };
    render() {
        return (
            <React.Fragment>
                <p className=output>
                    {this.state.displayInput && (
                        <input
                            type="text"
                            className="here"
                            value={this.state.value}
                            onChange={this.handleChange}
                            onKeyDown={this.handelEnter}
                        />
                    )}
                    {this.state.value}
                </p>
            </React.Fragment>
        );
    }

    handleChange = event => {
        this.setState({ value: event.target.value });
    };

    handelEnter = event => {
        if (event.key === "Enter") {
            this.setState({displayInput : false})
            this.props.handelWhatever(event.target.value, this.state.id);
    }
    };

}

export default NewLine;

当我在输入中输入“某物”时，它应该生成一个换行组件，并从上一个组件中删除输入，以便用户可以在新渲染的行上键入，这就是为什么我的bool处于新行状态，但bool不会更改，即使打印了

console.log（“Did bool change”）

，我还给了setState一个回调函数

this.setState({ displayInput: false }, () => console.log(this.state))

它将状态和显示输入更新为false，但在react控制台中仍将显示输入显示为true

还是有其他方法可以做到这一点

谢谢你的帮助

---

欢呼声

布尔更改了吗

从

设置状态

的回调中打印出来；在这一点上，状态发生了变化。由于

setState

是异步的，所以它在

HandleCenter

的其余部分中没有更改，这是回调函数存在的原因之一。请尝试对特定状态值使用回调

this.setState（{displayInput:false}，（）=>{console.log（“displayInput boolean-->”，this.state.displayInput）；}）如果您只想确认componentDidUpdate方法中的打印状态。您还可以打印上一个状态和当前状态以进行比较。我正在考虑将bool传递给换行符，然后在新行中更改this.props.bool。这是一种正确的方法吗？@DaveNewton我现在将其作为道具传递，因为它没有更新，因为setstate是异步的，但我遇到了一个新问题。请参阅第一篇文章中的更新。非常感谢。