Reactjs 在JS对象中使用redux数据

我在这里试图做的是从redux存储中获取数据，并在Options对象中使用它。我不知道如何用redux中的数据填充选项obj的各个部分。在redux logger中，我看到一切正常，数据存储在redux状态。我认为问题可能在于访问选项对象中的道具，但不知道如何传递这些道具。Highcharts用于数据显示

从mapStateToProps访问数据的this.props.myValue是否仅在连接到redux存储的react组件内部有效

import React from 'react'
import { connect } from 'react-redux'
import Highcharts from 'highcharts'
import HighchartsReact from 'highcharts-react-official'

import PreviewNav from '../../../components/preview-nav/preview-nav.component'

import './price-history.styles.scss'

const Options = {
    chart: {
        type: 'line'
    },
    title: {
        text: 'Price History'
    },
    xAxis: {
        title: {
            text: 'Date of change'
        },
        categories: [...this.props.time]
    },
    yAxis: {
        title: {
            text: 'Price in $'
        }
    },
    series: [
        {
            name: 'Price',
            data: [...this.props.price]
        }
    ]
}

const PriceHistory = ({ match }) => {
    console.log(this.props.time)
    return (
        <div>
            <PreviewNav id={match.params.id} />
            <HighchartsReact highcharts={Highcharts} options={Options} />
        </div>
    )
}

const mapStateToProps = state => {
    return {
        price: state.itms.quantityChanges.value,
        time: state.itms.quantityChanges.time
    }
}

connect(mapStateToProps)(Options)
export default PriceHistory

从“React”导入React
从“react redux”导入{connect}
从“Highcharts”导入Highcharts
从“highcharts反应官方”导入highcharts反应
从“../../../components/preview nav/preview nav.component”导入PreviewNav
导入“./price history.styles.scss”
常量选项={
图表：{
类型：“行”
},
标题：{
文字：“价格历史记录”
},
xAxis：{
标题：{
文本：“变更日期”
},
类别：[…此.道具.时间]
},
亚克斯：{
标题：{
文本：“价格单位为美元”
}
},
系列：[
{
名称：'价格'，
数据：[…这个.道具.价格]
}
]
}
const PriceHistory=（{match}）=>{
console.log（this.props.time）
返回(
)
}
常量mapStateToProps=状态=>{
返回{
价格：state.itms.quantityChanges.value，
时间：state.itms.quantityChanges.time
}
}
连接（MapStateTops）（选项）
导出默认价格历史记录

答案是肯定的，您只能访问组件内部的道具。 试着这样做

const setOptions (props) = {
const Options = {
    chart: {
        type: 'line'
    },
    title: {
        text: 'Price History'
    },
    xAxis: {
        title: {
            text: 'Date of change'
        },
        categories: [...props.time]
    },
    yAxis: {
        title: {
            text: 'Price in $'
        }
    },
    series: [
        {
            name: 'Price',
            data: [...props.price]
        }
    ]
}
}

---

答案是肯定的，您只能访问组件内部的道具。 试着这样做

const setOptions (props) = {
const Options = {
    chart: {
        type: 'line'
    },
    title: {
        text: 'Price History'
    },
    xAxis: {
        title: {
            text: 'Date of change'
        },
        categories: [...props.time]
    },
    yAxis: {
        title: {
            text: 'Price in $'
        }
    },
    series: [
        {
            name: 'Price',
            data: [...props.price]
        }
    ]
}
}

---

将最后两行更改为

export default connect(mapStateToProps)(PriceHistory);

---

要连接组件，我们必须将组件作为函数参数传递给connectapi。

将最后两行更改为

export default connect(mapStateToProps)(PriceHistory);

---

要连接组件，我们必须将组件作为函数参数传递给connectapi。

是，必须用connect包装PriceHistory组件是，必须用connect包装PriceHistory组件