javascript - 未捕获的类型错误：无法读取 null 的属性“地图”

Question

我正在关注一个在线教程，一切都很顺利，直到我谈到了关于路由器的部分。我实际上删除了所有代码并从 github 粘贴了讲师的代码，但仍然出现此错误。文件夹结构和依赖关系相同。当应用程序刚刚中断时，我不知道如何解决这个问题。命令行没有显示这个错误，只有浏览器

Recipes.js:7 未捕获的类型错误：无法读取 null 的属性“地图”

import React, { Component } from 'react';
import './App.css';

import Form from "./components/Form";
import Recipes from "./components/Recipes";

const API_KEY = "xxxxxxxxxx";

class App extends Component {
    state = {
        recipes: []
    }
    getRecipe = async (e) => { 
        const recipeName = e.target.elements.recipeName.value;
        e.preventDefault();
        const api_call = await fetch(`https://cors-anywhere.herokuapp.com/http://food2fork.com/api/search?key=${API_KEY}&q=${recipeName}&count=10`);

        const data = await api_call.json();
        this.setState({ recipes: data.recipes });
        console.log(this.state.recipes);
    }
    componentDidMount = () => {
        const json = localStorage.getItem("recipes");
        const recipes = JSON.parse(json);
        this.setState({ recipes });
    }
    componentDidUpdate = () => {
        const recipes = JSON.stringify(this.state.recipes);
        localStorage.setItem("recipes", recipes);
    }
    render() {
        return (
            <div className="App">
                <header className="App-header">
                    <h1 className="App-title">Recipe Search</h1>
                </header>
                <Form getRecipe={this.getRecipe} />
                <Recipes recipes={this.state.recipes} />
            </div>
        );
      }
    }

export default App;}

{import React from 'react';

import { Link } from "react-router-dom";

const Recipes = props => (
    <div className="container">
        <div className="row">
        { props.recipes.map((recipe) => {
          return (
            <div key={recipe.title} className="col-md-4" style={{ marginBottom:"2rem" }}>
                <div className="recipes__box">
                  <img
                      className="recipe__box-img"
                      src={recipe.image_url}
                      alt={recipe.title}/>
                  <div className="recipe__text">
                      <h5 className="recipes__title">
                      { recipe.title.length < 20 ? `${recipe.title}` : `${recipe.title.substring(0, 25)}...` }
                      </h5>
                      <p className="recipes__subtitle">Publisher: <span>
                      { recipe.publisher }
                      </span></p>
                  </div>
                  <button className="recipe_buttons">
                      <Link to={{
                      pathname: `/recipe/${recipe.recipe_id}`,
                      state: { recipe: recipe.title }
                      }}>View Recipe</Link>
                  </button>
              </div>
          </div>
         );
       })}
    </div>
  </div>
);

export default Recipes;

标签： javascriptreactjsreact-router

Answer 1

有几种方法可以解决这个问题，我的解决方案是检查 localStorage 中的“json”是否存在，即它既不是 null 也不是 undefined 或空字符串，...

componentDidMount = () => {
  const json = localStorage.getItem("recipes");

  if(json){
    const recipes = JSON.parse(json);
    this.setState({ recipes });
  }       
}