Javascript 定义变量然后调用它（未定义）

我正在定义一个名为filteredRecipes的常量变量，并试图使用它来设置状态。控制台报告filteredRecipes未定义

Uncaught ReferenceError: filteredRecipes is not defined

我看不出我做错了什么？非常感谢您的帮助

updateRecipeList () {
    const filteredRecipes = fetch('http://www.***.co.uk/rest/recipes.json')
        .then(res => res.json())
        .then(json => {

            json.results.filter(

                function (recipe) {
                    return (
                        this.state.currentRecipe === "" || recipe.pagetitle.toLowerCase().indexOf(this.state.currentRecipe.toLowerCase()) !== -1
                    )
                }.bind(this)

            );

        });

    this.setState({
        recipes: filteredRecipes
    });
}

---

你必须在承诺链的末尾这样做：

updateRecipeList() {
    return fetch('http://www.***.co.uk/rest/recipes.json')
        .then(res => res.json())
        .then(json => {

            // you also missed `return` here    
            return json.results.filter(

                function(recipe) {
                    return (
                        this.state.currentRecipe === "" || recipe.pagetitle.toLowerCase().indexOf(this.state.currentRecipe.toLowerCase()) !== -1
                    )
                }.bind(this)

            );

        })
        .then(filteredRecipes => {

            this.setState({
                recipes: filteredRecipes
            });

        });
}

我还对您的代码进行了一点重构，希望您不介意。：）

---

你必须在承诺链的末尾这样做：

updateRecipeList() {
    return fetch('http://www.***.co.uk/rest/recipes.json')
        .then(res => res.json())
        .then(json => {

            // you also missed `return` here    
            return json.results.filter(

                function(recipe) {
                    return (
                        this.state.currentRecipe === "" || recipe.pagetitle.toLowerCase().indexOf(this.state.currentRecipe.toLowerCase()) !== -1
                    )
                }.bind(this)

            );

        })
        .then(filteredRecipes => {

            this.setState({
                recipes: filteredRecipes
            });

        });
}

我还对您的代码进行了一点重构，希望您不介意。：）

这是因为该线程正在异步运行，您需要在设置setState时执行承诺

---

这是因为此线程正在异步运行，您需要在设置setState时执行承诺。

原因是您的

This.setState

超出了承诺的范围，这意味着在尝试执行该代码之前，我不会等待承诺完成。这意味着变量将是未定义的

您可以通过将其放入承诺中来解决此问题，如下所示：

updateRecipeList() {
  const filteredRecipes = fetch('http://www.***.co.uk/rest/recipes.json')
    .then(res => res.json())
    .then(json => {
      json.results.filter(
        function(recipe) {
          return (
            this.state.currentRecipe === "" || recipe.pagetitle.toLowerCase().indexOf(this.state.currentRecipe.toLowerCase()) !== -1
          )
        }.bind(this)
      );
      this.setState({
        recipes: filteredRecipes
      });
    });


}

---

原因是因为您的

this.setState

超出了承诺范围，这意味着我不会等到承诺完成后再尝试执行该代码。这意味着变量将是未定义的

您可以通过将其放入承诺中来解决此问题，如下所示：

updateRecipeList() {
  const filteredRecipes = fetch('http://www.***.co.uk/rest/recipes.json')
    .then(res => res.json())
    .then(json => {
      json.results.filter(
        function(recipe) {
          return (
            this.state.currentRecipe === "" || recipe.pagetitle.toLowerCase().indexOf(this.state.currentRecipe.toLowerCase()) !== -1
          )
        }.bind(this)
      );
      this.setState({
        recipes: filteredRecipes
      });
    });


}

---

之所以会发生这种情况，是因为fetch是异步的，下面是通过在then部分中设置state来实现的方法：

updateRecipeList() {
const self = this;
fetch('http://www.***.co.uk/rest/recipes.json')
.then(res => res.json())
.then(json => {
    const filteredRecipes = json.results.filter(recipe =>
        self.state.currentRecipe === "" ||  recipe.pagetitle.toLowerCase().indexOf(self.state.currentRecipe.toLowerCase()) !== -1);

   self.setState({ recipes: filteredRecipes });
});

} 也可以使用ES7异步函数获取结果：\

async updateRecipeList() {
  const res = await fetch('http://www.***.co.uk/rest/recipes.json');
  const recipies = await res.json();
  const filteredRecipes = recipies.results.filter(recipe =>
     this.state.currentRecipe === "" ||recipe.pagetitle.toLowerCase().indexOf(this.state.currentRecipe.toLowerCase()) !== -1

   this.setState({ recipes: filteredRecipes });

---

}

之所以发生这种情况，是因为fetch是异步的，下面是通过在then部分中设置状态来实现的方法：

updateRecipeList() {
const self = this;
fetch('http://www.***.co.uk/rest/recipes.json')
.then(res => res.json())
.then(json => {
    const filteredRecipes = json.results.filter(recipe =>
        self.state.currentRecipe === "" ||  recipe.pagetitle.toLowerCase().indexOf(self.state.currentRecipe.toLowerCase()) !== -1);

   self.setState({ recipes: filteredRecipes });
});

} 也可以使用ES7异步函数获取结果：\

async updateRecipeList() {
  const res = await fetch('http://www.***.co.uk/rest/recipes.json');
  const recipies = await res.json();
  const filteredRecipes = recipies.results.filter(recipe =>
     this.state.currentRecipe === "" ||recipe.pagetitle.toLowerCase().indexOf(this.state.currentRecipe.toLowerCase()) !== -1

   this.setState({ recipes: filteredRecipes });

---

}

我的意思是这可能会满足OP的要求，但为什么原始版本中未定义

filteredRecipes

？它应该具有

fetch

返回的（未解析的）Promise对象的值，而且您也从未为“filteredRecipes”分配任何有意义的内容，因此在您使用它的地方它仍然是未定义的。在获取完成之前，它基本上不返回任何内容，因此变量的值将是未定义的。这没有任何意义

fetch（）

在承诺“完成”之前立即返回承诺，否则无法调用chained

then（）

s。它是可组合的异步代码的基础。您不将“代码> >过滤器< /代码>的结果分配给任何变量。我的意思是，这可能是OP想要的，但是为什么在原始版本中<代码> FieldEddieSuth/<代码>未定义？它应该具有

fetch

返回的（未解析的）Promise对象的值，而且您也从未为“filteredRecipes”分配任何有意义的内容，因此在您使用它的地方它仍然是未定义的。在获取完成之前，它基本上不返回任何内容，因此变量的值将是未定义的。这没有任何意义

fetch（）

在承诺“完成”之前立即返回承诺，否则无法调用chained

then（）

s。它是可组合异步代码的基础。您不将代码< >过滤器> <代码>的结果分配给任何变量。