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

我来自角度世界。我还有点新反应。我遇到反应一个状态变量取决于多个其他状态变量

一个问题是：

在角度，我们必须$watch看一个范围变量来改变和更新其他变量。喜欢看B，C，D，而B，C，D的变化会影响变量A

在反应中，我试图做同样的事情。但是，我打电话给setState(B,callbackB)更新A. A有setState，它对渲染产生影响

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

有什么我做错了吗？

谢谢

来源

2017-02-17 yoyohoho

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

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

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

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

问题是，如果您键入某个内容并将其删除，则按钮仍处于活动状态，直到您键入另一个键，这是下一个循环。

我用input1Err（）

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

，以确定是否应formError在checkErr被禁用这是什么原因，之所以视图改变下一个周期发生的。 因为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。有没有办法我可以看这个变量，所以当它改变完成，我可以有某种回调？

谢谢

来源

2017-02-18 07:51:23 yoyohoho

你不能依靠setState立即更新。尝试将新值明确传递给setState A.

来源

2017-02-17 20:26:29

一个示例将有助于阐明您的情况，但根据“更新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

来源

2017-02-17 20:46:57 Jeff

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

回答

相关问题