一个状态变量依赖于多个其他状态变量。

Question

我来自棱角世界。我还没反应过来。

我遇到的一个问题是：

在角度上，我们有$watch来观察一个作用域变量来改变和更新其他变量。就像表B，C，D，以及B，C，D的变化会影响变量A

在反应上，我试图做同样的事情。但是，我调用setState(B,callbackB)更新A。A有一个对呈现有影响的setState

对于变量B，似乎正确地执行了这样的工作。然而，更新A将在下一个呈现周期中发生。而this.forceUpdate()似乎不起作用。

我做错什么了吗？

谢谢

Answer 1

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

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，怎么办？有什么方法可以监视这个变量，所以当它更改完全时，我可以进行某种回调？

谢谢

Answer 2

一个例子将有助于澄清您的情况，但取决于什么“更新A”，您可以将它移到您的渲染功能。例如。

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>
  }
}

当从角度转变为反应时，记住scope !== state是很重要的。这可能会有帮助：https://facebook.github.io/react/docs/thinking-in-react.html

Answer 3

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