如何在反應中將數據文件加載到狀態數組？

Question

我是新來react.And我試圖加載數據文件到一個狀態數組，而不是直接將數組中的數據狀態。下面我已經放置的代碼。但這不顯示數據。

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" 
    } 
] 

Answer 1

<Projects myArrays = {this.state.myArrays} /> 

和

之間的區別210

<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 

    } 

和替換它的第一個版本也將工作