Obtengo el valor redux para crear una nueva matriz en Data.js , y quiero usar los nuevos datos de la matriz para dibujar un gráfico en Chart.js
asi que...
¿Cómo puedo pasar data_pie a Chart.js ¿Puedo simplemente exportar data_pie en Data.js ?
Hay un componente de reacción para obtener los datos.
//Chart.js import ChartBar from './ChartBar.js'; import Data from './Data.js'; export default class Chart extends Component{ render(){ return <div className="chart"> <ChartBar data={Data}/> </div> ); } }Y en data.js obtenga algún valor del redux
//Data.js import React,{ Component } from 'react' import { connect } from 'react-redux'; import raws from './another.json'; function filter_pie(apple,lemon){ //...put raws and redux together to filter some array we need } return [newArray,pieName] } class Data extends Component { render () { const { props: { apple, lemon } } = this let data_pie = filter_pie( apple, lemon ) return( <div> {data_pie} //can I put the data in there ? or I don't need to write any return in this js? </div> ) } } function mapStateToProps(state) { return { apple:state.apple, lemon:state.lemon, }; } export default connect(mapStateToProps)(Data); No tengo idea de cómo puedo pasar la matriz data_pie a chart.js
Si los datos se manipulan en Data.js, deben guardarse en la tienda redux usando una acción y un reductor.
Cuando almacenó sus datos en la tienda redux, simplemente cree otro componente de contenedor alrededor de Chart.js y use mapStateToProps() para el gráfico.
Sí, puede pasar datos directamente a otro componente, supongo que su parte reductora funciona bien y está obteniendo datos en data.js , así es como se verá su código
//Chart.js import React, { Component } from 'react'; import PropTypes from "prop-types"; import ChartBar from './ChartBar.js'; //import Data from './Data.js'; //No need to import here export default class Chart extends Component{ static propsTypes = { data: PropTypes.array.isRequired }; render(){ return <div className="chart"> <ChartBar data={this.props.data}/> </div> ); } }y su archivo de datos se verá así,
//Data.js import React,{ Component } from 'react' import { connect } from 'react-redux'; import raws from './another.json'; import Chart from './Chart'; //fix the path to Chart.js if that file is not in same folder. function filter_pie(apple,lemon){ //...put raws and redux together to filter some array we need } return [newArray,pieName] } class Data extends Component { render () { const { props: { apple, lemon } } = this let data_pie = filter_pie( apple, lemon ) return( <div> { //data_pie} { //instead use <Chart /> here and pass data_pie as prop } <Chart data={data_pie} /> </div> ) } } function mapStateToProps(state) { return { apple:state.apple, lemon:state.lemon, }; } export default connect(mapStateToProps)(Data);