从React中的json文件输出数据

时间:2018-02-20 05:22:14

标签: json reactjs react-redux

我需要输出用户在前面加载的json文件中的数据。

我下载了json文件,但是我在Redux中找到了一个奇怪的商店,无法弄清楚如何从商店进一步向屏幕显示数据。

我需要做什么?

import React from 'react'
import { connect } from 'react-redux'
import * as actions  from './actions'

class File extends React.Component {
  constructor (props) {
    super(props)
  }
  handleChange (e) {
    e.preventDefault();
    let reader = new FileReader();
    let file = e.target.files[0];
    reader.onloadend = () => {
      let text = reader.result;
      this.props.jsonLoad(JSON.parse(text))
    }
    reader.readAsText(file)
  }

  render () {
    return (
      <div>
        <h3> Add your file: </h3>
        <input type="file" multiple onChange={this.handleChange.bind(this)}/>
        <button >
          add text from file
        </button>
      </div>
    )
  }
}

const mapStateToProps = (state) => {
  return {
    json: state.json
  }
}

function mapDispatchToProps (dispatch) {
  return {
    jsonLoad: (json) => dispatch(actions.jsonLoad(json)),
  }
}

export default connect(mapStateToProps, mapDispatchToProps)(File)

action.js

const USER_JSON = 'USER_JSON';
export function jsonLoad(json) {
  console.log( json)
  return function (dispatch) {
    let file = json
    dispatch(addFile(file))
  }
}

export function addFile (json) {
  return{
    type: 'USER_JSON',
    payload: json
  }
};

0 个答案:

没有答案