ReactJS：如何将数据从本地存储中的 JSON 传递到组件？

Question

我一直在尝试获取已设置到本地存储中的 JSON 数据的值。然后，我尝试使用 .map 函数从 Food.js 文件访问此数据（处于 APP.js 状态）。返回的值仅出现在 APP.js 的警报中，即 [object Object]、[object Object]、[object Object]，然后它说 .map 不是函数。你们知道发生了什么事吗？

应用程序.js

import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';
import Food from './Food.js';
import Form from './Form.js';

class App extends Component {
  constructor(){
    super();
    var testObject = [
      {title: "Pumpkin Pie", ingredients: ["Pumpkin Puree", "Sweetened Condensed Milk", "Eggs", "Pumpkin Pie Spice", "Pie Crust"]},
      {title: "Spaghetti", ingredients: ["Noodles", "Tomato Sauce", "(Optional) Meatballs"]},
      {title: "Onion Pie", ingredients: ["Onion", "Pie Crust", "Sounds Yummy right?"]}
    ];

  localStorage.setItem('testObject', JSON.stringify(testObject));

    this.state = {
      apple:localStorage.getItem('testObject')
    }
    alert(JSON.parse(localStorage.getItem('testObject')));
}

  render() {
    return (
      <div className="App">
        <div id="app">
          <div>
            <ul>
              <Food ingTitle={this.state.apple} />
            </ul>
          </div>

        </div>
        <Form />
      </div>
    );
  }
}

export default App;

食物.js

import React, { Component } from 'react';
import './Food.css';
import FoodList from './FoodList.js';

export default class Food extends Component {

  constructor(props){
    super(props);
    this.state = {
      isToggleTrue:false
    }
    this.handleClick = this.handleClick.bind(this)
  }


  handleClick(e){
    e.preventDefault();

    this.setState(prevState => ({
      isToggleTrue: !prevState.isToggleTrue
    }));
  };


  render() {
    return (
      <div className="Food">
        <li className="foods"><a href="#" onClick={this.handleClick}>asdfasdf</a>

          <FoodList name ="asdf" />
        </li>
        <div>{
          this.props.ingTitle.map((a,i) => {
            <li>{a.ingredients}</li>
          })
        }</div>
      </div>
    );
  }

}

Answer 1

将项目分配给statefrom时localStorage，您还需要使用JSON.parse，因为您JSON.stringify在设置数据时使用localStorage

this.state = {
  apple:JSON.parse(localStorage.getItem('testObject'))
}

您会收到错误，因为在初始化状态时，您直接将结果分配给localStorage状态，该状态是 a string，因此没有map在其上定义方法。