Question

我来自棱角分明的世界。我仍然有点新的反应。

我遇到的一个问题是：

在angular中，我们有$watch来观察一个范围变量来更改和更新其他变量。比如看B，C，D，B，C，D的变化会影响变量A

在做出反应时，我正在尝试做同样的事情。但是，我打电话给setState(B,callbackB)更新A. A有一个setState对渲染有影响

似乎对变量B正确地执行此操作。但是，更新A将在下一个渲染周期中发生。 this.forceUpdate()似乎不起作用。

我有什么问题吗？

由于

Answer 1

一个例子可以帮助澄清你的情况，但根据“更新A”的含义，你可以将它移动到你的渲染功能。 E.g。

class Component extends React.Component {
  handleUpdate(B) {
    this.setState({B})
  }

  computeAFromB(B) {
    ...
    return A
  }

  render() {
    const A = this.computeAFromB(this.state.B)

    return <div>{A}</div>
  }
}

从Angular转换为React时，请务必记住scope !== state。这可能会有所帮助：https://facebook.github.io/react/docs/thinking-in-react.html

Answer 2

您不能立即依赖setState进行更新。尝试将新值显式传递给setState A.

Answer 3

这是我的示例代码，我想我已经找到了答案。

https://jsfiddle.net/yoyohoho/Lo58kgfq/1/

在jsfiddle的示例代码中。输入字段是必填字段。

如果该字段中没有任何内容，则应禁用该按钮。

问题在于，如果您输入内容并将其删除，按钮仍处于活动状态，直到您输入另外一个键，这是下一个周期。

我使用input1Err来确定是否应该在checkErr（）

中禁用formError

checkErr(){
    if(this.state.input1Err == false){
        this.setState({formErr: false });
    }else{
        this.setState({formErr: true });
    }
}

这就是为什么视图在下一个周期发生变化的原因。 因为setState是异步的

我正在使用this.state.input1Err来确定formErr，它可能在if语句之前被更改。

所以我改为以下闭包，这解决了我的问题。

checkErr(){
  const self = this;
  (function(j){setTimeout(function(){
    if(self.state.input1Err == false){
      self.setState({formErr: false });
    }else{
      self.setState({formErr: true });
    }
  },10)})(self);
}

这似乎是一个快速修复。但是，如果有ajax调用并连接到state.input1Err，该怎么办？我有没有办法观察这个变量，所以当它改变完成时，我可以进行某种回调？

由于

反应一个状态变量取决于多个其他状态变量

3 个答案: