如何在存储 redux 中编写本地 json?

Question

我想在存储 redux 中记录一个本地 json。我做错了什么，因为数组已写入，但我无法将其.map.

完整数组输出到控制台，但在 Map 之后显示一个列表，没有数据。也就是说，他看到数组中的对象数量，但不输出数据。

告诉我怎么做对？ 我还读到您甚至可以对本地 json 文件使用 fetch。这话呢？

import React from 'react';
import ReactDOM from 'react-dom';
import { Provider } from 'react-redux';
import { createStore } from 'redux';
import Clients from './clients.json'; // This is json file
import App from './App';
import registerServiceWorker from './registerServiceWorker';
function clients(state = Clients) { // Clients is array data
return state
}
const store = createStore(clients); // This is reducers
ReactDOM.render(
<Provider store={store}>
<App />
</Provider>,
document.getElementById('root'));
registerServiceWorker();
// App.js
import React, { Component } from 'react';
import { connect } from 'react-redux';
class App extends Component {
render() {
console.log(this.props.testStore); // full array
return (
<div className="App">
<ul>
{this.props.testStore.map((general, index) =>
<li key={index}>{general.firstName}</li> 
)}
</ul> 
</div>
);
}
}
export default connect(
state => ({
testStore: state
}),
dispatch => ({})
)(App);
// clients.json
[
{
"general": {
"firstName": "Liana",
"lastName": "Crooks",
"avatar": "https://s3.amazonaws.com/uifaces/faces/twitter/kevinoh/128.jpg"
},
"job": {
"company": "Ledner, Johnson and Predovic",
"title": "Investor Functionality Coordinator"
},
"contact": {
"email": "[e-mail]",
"phone": "[phone]"
},
"address": {
"street": "1520 Zemlak Cove",
"city": "New Devon",
"zipCode": "42586-7898",
"country": "Guinea-Bissau"
}
},
{
"general": {
"firstName": "Deontae",
"lastName": "Dare",
"avatar": "https://s3.amazonaws.com/uifaces/faces/twitter/andysolomon/128.jpg"
},
"job": {
"company": "D'Amore, Dicki and Borer",
"title": "International Applications Consultant"
},
"contact": {
"email": "[e-mail]",
"phone": "1-615-843-3426 x600"
},
"address": {
"street": "65901 Glover Terrace",
"city": "Alden ton",
"zipCode": "57744-4248",
"country": "Kenya"
}
},
{
"general": {
"firstName": "Cortez",
"lastName": "Pacocha",
"avatar": "https://s3.amazonaws.com/uifaces/faces/twitter/holdenweb/128.jpg"
},
"job": {
"company": "McKenzie Group",
"title": "Forward Branding Developer"
},
"contact": {
"email": "[e-mail]",
"phone": "725.583.0926 x0430"
},
"address": {
"street": "376 Reginald Dam",
"city": "Port Enid fort",
"zipCode": "51294-8361",
"country": "Belarus"
}
}
]

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>

Answer 1

您绝对可以像现在一样导入 json 文件。

我认为问题出在您的地图回调上。我会把它改成：

<ul>
{this.props.testStore.map((arrayItem, index) =>
<li key={index}>{arrayItem.general.firstName}</li> 
)}
</ul>