Javascript 反应本机+；Redux：为什么从存储中检索旧状态？

在过去的几天里，我被这件事绊住了，不知道自己做错了什么。为了解决这个问题，我创建了一个简单的计算器，将用户的一个数字乘以2

我们有一个简单的纯reducer，它只是一个键值存储（不是最好的存储结构，但这不是我的观点）。我们将使用它存储数字和结果：

initialState = {number: '', result: ''}

const calculatorReducer = (state = initialState, action) => {
  switch (action.type) {
    case CHANGE_VALUE:
      return {
        ...state,
        [action.field]: action.value
      };
  }

  return state

}

顺便说一句，我们只需使用此函数即可获得一个值：

export const getValue = (state, field) => {
    return state[field];
}

我们有以下两个部分。父级负责逻辑：

const CalculatorLogic = props => {
  const evaluate = () => {
      props.changeValue('result', props.getValue('number') * 2)
  }

  return (
    <View style={styles.container}>
        <MyInput name="number" onChange={evaluate}/>
        <MyInput name="result" onChange={evaluate}/>
    </View>
  );
}

function mapStateToProps(state) {
    return {
        getValue: (field) => getValue(state, field),
    }
}

function mapDispatchToProps(dispatch) {
    return {
        changeValue: (field, value) => dispatch(changeValue(field, value)),
    }
}

export default connect(mapStateToProps, mapDispatchToProps)(CalculatorLogic)

const CalculatorLogic=props=>{
常数求值=（）=>{
props.changeValue（'result'，props.getValue（'number'）*2）
}
返回(
);
}
函数MapStateTops（状态）{
返回{
getValue：（字段）=>getValue（状态，字段），
}
}
功能图DispatchToprops（调度）{
返回{
changeValue:（字段，值）=>分派（changeValue（字段，值）），
}
}
导出默认连接（MapStateTrops、mapDispatchToProps）（CalculatorLogic）

下面是我们正在使用的输入字段：

const MyInput = props => {
    const valueHandler = value => {
        if (props.value != value) { // user changed a value?
            props.changeValue(props.name, value) // then change it in state
            props.onChange()  // and call evaluate function in parent
        }
    }

    return (
        <View style={{padding: 20}}>
            <Text>Field {props.name}</Text>
            <TextInput
                style={{width: 200, border: 1}}
                onChangeText={valueHandler}
                value={props.value ? props.value.toString() : ''}
            />
        </View>
  );
}

function mapStateToProps(state, ownProps) {
    return {
        value: getValue(state, ownProps.name),
    }
}

function mapDispatchToProps(dispatch) {
    return {
        changeValue: (field, value) => dispatch(changeValue(field, value)),
    }
}

export default connect(mapStateToProps, mapDispatchToProps)(MyInput)

constmyinput=props=>{
常量valueHandler=value=>{
如果（props.value！=value）{//用户更改了值？
props.changeValue（props.name，value）//然后在状态中更改它
props.onChange（）//并在父级中调用求值函数
}
}
返回(
字段{props.name}
);
}
函数mapStateToProps（状态，ownProps）{
返回{
value:getValue（state，ownProps.name），
}
}
功能图DispatchToprops（调度）{
返回{
changeValue:（字段，值）=>分派（changeValue（字段，值）），
}
}
导出默认连接（mapStateToProps、mapDispatchToProps）（MyInput）

我的问题是：为什么它来得晚

例如：

用户按下数字7，什么也没有发生（它应该显示14，即7*2）

然后，用户输入5，显示14（7乘以2，而不是75乘以2） 二)

然后，用户输入3，显示150（75乘以2，而不是753乘以2）

等等

为什么它使用旧状态而不是当前状态？我做错了什么？（是的，我想在父组件中存储登录名）

---

谢谢

设置状态是一个异步操作。所以你永远不会知道你得到的是当前值还是上一个值。当有足够的资源（如预性能）可用时，React/Redux将执行状态更改

您可以在

evaluate

函数中直接传递

number

和

result

。这将保证最新的价值

当在同一（组件）渲染周期中可能更改当前状态值时，切勿让代码中的任何逻辑依赖于当前状态值。

---

我希望这能帮助你

你说得对，它似乎起作用了。非常感谢您抽出时间！