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

Question

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

App.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

从 localStorage 将项目分配给 state 时，您还需要使用 JSON.parse 因为您使用 JSON.stringify 同时在 localStorage

中设置数据

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

你得到一个错误，因为在初始化状态时你直接将 localStorage 的结果分配给 state 这是一个 string 因此没有 map 上面定义的方法。