React调用this.setState赋值后状态值返回undefined问题排查

你遇到的问题由两个基础错误共同导致：

• 类组件状态访问路径错误：React类组件的所有状态都存储在this.state对象上，你代码里写的this.numKeysValue是直接在组件实例上找不存在的属性，自然永远返回undefined，正确的访问路径应该是this.state.numKeysValue。
• 不了解setState的异步特性：setState不会同步修改状态，调用setState后立刻读取状态，拿到的还是更新前的旧值，状态更新会等当前同步代码执行完后批量处理，之后才会触发组件重渲染、挂载新状态。

1. 修正状态访问路径，所有状态值都从this.state下读取
2. 不要在setState调用后同步打印状态值，要拿到更新后的最新值有两种通用方案：
   • 给setState传入第二个回调参数，状态更新完成、组件重渲染结束后回调会自动执行，此时读取的就是最新状态
   • 在render生命周期函数中读取状态，重渲染时render里拿到的永远是最新的状态值

修正后的父组件事件处理代码如下：

handleNumKeys(value) {
    this.setState(
        { numKeysValue: value },
        // 状态更新完成后的回调
        () => {
            console.log('更新后的numKeysValue：', this.state.numKeysValue);
        }
    );
    console.log('子组件传入的更新值：', value);
}

你传给子组件的回调prop命名和状态名完全一致（都叫numKeysValue），非常容易造成语义混淆，建议把回调类prop统一改成onXxxChange的命名格式，比如：

<QuestionDropDown
    question="How many answer keys do you have?"
    chosenValues={numAnswerKeys}
    onNumKeysChange={this.handleNumKeys}
    defaultValue="1"
/>

子组件中对应调用位置改成props.onNumKeysChange(parseInt(event.target.value))即可，语义更清晰，能减少很多低级误写问题。

内容的提问来源于stack exchange，提问作者George Nassar