我一直在尝试获取已设置到本地存储中的 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>
);
}
}
最佳答案
从 localStorage
将项目分配给 state
时,您还需要使用 JSON.parse
因为您使用 JSON.stringify
同时在 localStorage
this.state = {
apple:JSON.parse(localStorage.getItem('testObject'))
}
你得到一个错误,因为在初始化状态时你直接将 localStorage
的结果分配给 state 这是一个 string
因此没有 map
上面定义的方法。
关于ReactJS:如何将数据从本地存储中的 JSON 传递到组件?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/48794239/