將數據傳遞到React組件

Question

我正在學習一些React和Redux。 我有一個函數，可以在另一個名為person_list.js的文件中返回一組人。 看起來像這樣。

export default function() {
    return [
        {
            "name": "Michael Smith",
            "age": 40,
            "location": "New York",
            "salary": 80000
        }
    ]

}

我想將薪水數據傳遞到迷你圖組件中以創建圖形。

import React, { Component } from 'react';
import {connect} from 'react-redux';
import { Sparklines, SparklinesLine } from 'react-sparklines';

class PersonList extends Component {
    personsData = {

    }


    render() {
        return (
            <Sparklines height={120} width={180} data={personsData}>
            <SparklinesLine color="red" />
            </Sparklines>
            )
    }
}

function mapStateToProps(state) {
    return {
        persons: state.person
    }
}

export default connect(mapStateToProps)(PersonList);

我在獲取薪水數據並將其傳遞給組件時遇到了麻煩。

Answer 1

您可以嘗試以下方法：

...
render(){
    // Create an array and populate it with salary value in all the
    // objects in this.props.persons array
    const personsData = [];
    this.props.persons.forEach(person => personsData.push(person.salary));

    return (
        <Sparklines height={120} width={180} data={personsData}>
            <SparklinesLine color="red" />
        <Sparklines>
    );
}
...

我尚未測試此代碼。 但它應該起作用。