我是新来的人，我试图将数据文件加载到状态数组中，而不是直接在状态中放置数据数组。下面放置了代码，但这并不显示数据。
App.js
import React, { Component } from 'react';
import Projects from './Components/Projects';
import data from './data/data'
class App extends Component {
constructor(){
super();
this.state = {
myArrays: [{data}]
}
}
render() {
return (
<div className="App">
<Projects myArrays = {this.state.myArrays} />
</div>
);
}
}
export default App;
如果我更换它会起作用
<Projects myArrays = {this.state.myArrays} /> with <Projects myArrays = {data} />
两者之间有什么区别？而且为什么它不加载数据
<Projects myArrays = {this.state.myArrays} />
Project.js
import React, { Component } from 'react';
class Projects extends Component {
render() {
let projectItems;
projectItems = this.props.myArrays.map((project,i) =>{
return(
<li key = {i}>{project.title}</li>
);
});
return (
<ul>
{projectItems}
</ul>
);
}
}
export default Projects;
data.js
export default [
{
title: "Obama set for first political event since leaving office",
category: "politics"
},
{
title: 'La Liga refuse to accept PSG payment for Barcelona striker Neymar',
category: "sports"
},
{
title: "Virtu Financial closes KCG's European prop trading business",
category: "business"
}
]
最佳答案
和...之间的不同
<Projects myArrays = {this.state.myArrays} />
和
<Projects myArrays = {data} />
是您将数据分配给州的方式
this.state = {
myArrays: [{data}]
}
这将导致
this.state.myArrays看起来像[{data: [
{
title: "Obama set for first political event since leaving office",
category: "politics"
},
{
title: 'La Liga refuse to accept PSG payment for Barcelona striker Neymar',
category: "sports"
},
{
title: "Virtu Financial closes KCG's European prop trading business",
category: "business"
}
]
}]
替换为
this.state = {
myArrays: data
}
而且您的第一个版本也可以使用
关于javascript - 我如何将数据文件加载到状态数组中？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/45490198/