Question

我得到redux值在Data.js中创建一个新数组，我想使用新数组数据在Chart.js中绘制图表

所以...

如何将data_pie传递给Chart.js 我可以在data_pie中导出Data.js吗？

有一个反应组件来获取数据

//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>
        );   
    } }

在data.js中从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);

我不知道如何将数组data_pie传递给chart.js

Answer 1

如果在Data.js中操作数据，则应使用操作和缩减器将其保存到redux存储。

当您将数据存储到redux存储时，只需在Chart.js周围创建另一个容器组件，并使用mapStateToProps（）作为图表。

Answer 2

是的，您可以将数据直接传递给另一个组件，我假设您的reducer部件工作正常并且您正在import java.util.Optional; public class X { public static void main(String[] args) { Optional<Boolean> spouseIsMale = Optional.of(true); spouseIsMale.filter(b -> b).ifPresent(b -> System.out.println("There is a male spouse.")); } }中获取数据，这是您的代码的样子

data.js

，您的数据文件将如下所示

//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>
        );   
    } 
}

我可以将数据导出到另一个反应组件吗？

2 个答案: