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

Question

我正在定义一个名为 filteredRecipes 的 const 变量，我正在尝试将其用于 setState。控制台报告 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
    });
}

Answer 1

您必须在 Promise 链的末尾执行此操作：

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 => {
            if (this.state.currentRecipe !== "") {
                const currentRecipe = this.state.currentRecipe.toLowerCase()
                const filteredRecipes = json.results.filter(recipe => (
                    recipe.pagetitle.toLowerCase().includes(currentRecipe)
                ));

                this.setState({ recipes: filteredRecipes });
            }
            else {
                this.setState({ recipes: json.results });
            }
        });
}

Answer 2

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

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

Answer 3

原因是因为您的 this.setState 在 Promise 之外，这意味着我不会在尝试执行该代码之前等待 Promise 完成。这意味着变量将是未定义的。

你可以像这样把它放在 promise 中来解决这个问题：

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


}

Answer 4

发生这种情况是因为提取是异步的，您可以通过在 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 });

}

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

Defining a variable and then calling it (undefined)

javascript

api

filter

setstate

reactjs