Question

这里是我所拥有的React组件的简化版本：

class Example extends Component {
    constructor(props) {
        super(props);
        this.state = {key : 10 };
        this.value = null;
    }

    componentDidMount() {
        this.fetchValueFromServer();
        this.fetchSecondValueFromServer();
    }

    fetchValueFromServer() {
        fetch_value_from_server(this.state.key).then( (value) => {
            this.value = value;     
        }); 
    }

    fetchSecondValueFromServer() {
        is_ready(this.value).then(() => {
            console.log("there");       
        }); 
    }

}

我希望看到console.log（＆＃34;有＆＃34;）打印但this.value始终保持为空，即使您已在fetchValueFromServer中设置。为什么是这样？如果你对is_ready的看法感到好奇，这是一个简单的承诺：

function is_ready(variable) {

    return new Promise((resolve, reject) => {
        let interval = setInterval(() => 
        { 
            if (variable) {
                clearInterval(interval);
                resolve();
            }

        }, 100);
    });
}

Answer 1

问题在于is_ready功能的逻辑。看起来您希望该函数重复检查该值是否存在，然后解决该问题。但是，由于JS中的闭包如何工作，即使在variable更改之后，this.value参数在该函数体的上下文中也只会有一个值。看看这个小例子：

＆＃13;

let secret = 'not found yet'

function checkSecret(secretArg) {
  setInterval(() => {
    console.log(secretArg)
  }, 500)
}

checkSecret(secret)
setTimeout(() => { secret = 'secret found!' }, 1000)

＆＃13;

此代码将始终打印“尚未找到”，因为它会检查已在本地分配的secretArg变量，而不是secret直接变量。

Answer 2

您似乎需要在函数variable中使用is_ready值解析，如下所示：

resolve(variable);

然后在控制台日志中添加一个参数以确定更多信息，如下所示：

fetchSecondValueFromServer() {
    is_ready(this.value).then((returnValue) => {
        console.log("there", returnValue);       
    }); 
}

Answer 3

想通了，is_ready中的值是按值传递的！ Javascript需要实现＆amp;所以我们可以通过ref传递垃圾！

即使它已填充，也会使组件this.value为null

3 个答案: