通过将用户输入onchange传递给父组件来应对Javascript问题

在将方法从父组件传递到子组件时，我遇到了一个问题。父级FilterableProductTable具有名为filterText的状态。FilterableProductTable呈现子组件搜索栏，并将名为handleChange的函数作为属性传递。SearchBar在更改时调用此函数，以便我可以将用户输入从SearchBar传输到FilterableProductTable中的filterText状态

我遇到的问题是filterText更新得太晚了。我将filterText记录到控制台，并将用户输入值记录在我的handleChange函数中：

handleChange(event) {
    this.setState({ filterText: event.target.value });
    console.log(event.target.value + "value");
    console.log(this.state.filterText + "state");
}

我在控制台中得到的输出是：

//用户输入=a

价值

陈述

//用户输入=ab

ab值

州

//用户输入=a，因为b已被删除（退格键）

价值

ab状态

-----如您所见，状态是event.target.value后面的一个增量。我不知道如何解决这个问题。下面是我的两个功能。如果有人能帮我看看我做错了什么，那就太好了

class SearchBar extends React.Component {
    constructor(props) {
        super(props);
    }

    render() {
        return (
            <form>
                <input
                    type="text"
                    name="name"
                    placeholder="Search.."
                    onChange={this.props.handleChange}
                ></input>
                <br />
                <input type="checkbox" /> Only show items in stock
            </form>
        );
    }
}

class FilterableProductTable extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            filterText: "",
            inStockOnly: false,
        };
        this.handleChange = this.handleChange.bind(this);
    }

    handleChange(event) {
        this.setState({ filterText: event.target.value });
        console.log(event.target.value + " value");
        console.log(this.state.filterText + " state");
    }

    render() {
        console.log(this.state.filterText + " render");
        return (
            <div>
                <SearchBar handleChange={this.handleChange} />
                <ProductTable
                    products={this.props.products}
                    filterText={this.state.filterText}
                    inStockOnly={this.state.inStockOnly}
                />
            </div>
        );
    }
}

类搜索栏扩展React.Component{
建造师（道具）{
超级（道具）；
}
render（）{
返回(


仅显示库存中的项目
);
}
}
类FilterableProductTable扩展React.Component{
建造师（道具）{
超级（道具）；
此.state={
筛选文本：“”，
inStockOnly:false，
};
this.handleChange=this.handleChange.bind（this）；
}
手变（活动）{
this.setState（{filterText:event.target.value}）；
console.log（event.target.value+“value”）；
console.log（this.state.filterText+“state”）；
}
render（）{
log（this.state.filterText+“render”）；
返回(
);
}
}
这是因为React中的
设置
状态是一个
异步
操作，不会立即受到影响。您需要使用
setState
回调进行如下检查：

handleChange(event){
    this.setState({filterText:event.target.value}, () => {
      console.log(event.target.value+ ' value');
      console.log(this.state.filterText+ ' state');
    });
}