Javascript 如何将对象数组作为道具发送？

我有一个状态，它是一个包含数组的对象，这个数组包含一个类似这样的对象

[{“音调”：“负”、“值”：0}，{“音调”：“中性”、“值”：91}，{“音调”：“正”、“值”：9}]

所以我只想用这个对象数组中的值绘制一个条形图。我想将这些值发送到另一个组件，该组件可用于动态绘制条形图。但我不知道怎么做。是否有人可以演示如何将值发送到条形图组件并在条形图中使用它们

这是密码

state={
    analysis: {
      tonal: [],
      anxiety: []
    }
}
Analysis = async () => {
    //some api call

      const {
        ...tonalAnalysis
      } = result.scores;

      const tonalArray = Object.entries(tonalAnalysis).reduce(
        (carry, [tone, value]) => [
          ...carry,
          { tone: tone.toLowerCase(), value: parseInt(value) }
        ],
        []
      );

      this.setState({
        analysis: { ...this.state.analysis, tonal: tonalArray }
      });
      console.log("Tonal array" + JSON.stringify(this.state.analysis.tonal)); //console logs `[{"tone":"negative","value":0},{"tone":"neutral","value":91},{"tone":"positive","value":9}]`
  };

render(){
    return {
      <BarCharts/> // confused how to send the values as props here
}

状态={
分析：{
音调：[]，
焦虑：[]
}
}
Analysis=async（）=>{
//一些api调用
常数{
…色调分析
}=结果分数；
const tonalArray=Object.entries（tonalAnalysis）.reduce(
（进位，[音调，值]=>[
…携带，
{tone:tone.toLowerCase（），value:parseInt（value）}
],
[]
);
这是我的国家({
分析：{…this.state.analysis，音调：tonalArray}
});
console.log（“Tonal array”+JSON.stringify（this.state.analysis.Tonal））；//控制台日志`[{“tone”：“negative”，“value”：0}，{“tone”：“neutral”，“value”：91}，{“tone”：“positive”，“value”：9}]`
};
render（）{
返回{
//不知道如何在这里将值作为道具发送
}

我将使用的条形图组件

import React from "react";

import { Bar } from "react-chartjs-2";

import "./App.css";

class BarCharts extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      data: {
        labels: [
          negative,
          neutral,
          positive
        ],
        datasets: [
          {
            label: "Value plotting",
            backgroundColor: "rgba(255,99,132,0.2)",
            borderColor: "rgba(255,99,132,1)",
            borderWidth: 1,
            hoverBackgroundColor: "rgba(255,99,132,0.4)",
            hoverBorderColor: "rgba(255,99,132,1)",
            data: [65, 59, 80, 81, 56, 55, 40] //want to use the values here dynamically. Don't want these static values
          }
        ]
      }
    };
  }

  render() {
    const options = {
      responsive: true,
      legend: {
        display: false
      },
      type: "bar"
    };
    return (
      <Bar
        data={this.state.data}
        width={null}
        height={null}
        options={options}
      />
    );
  }
}

export default BarCharts;

从“React”导入React；
从“react-chartjs-2”导入{Bar}；
导入“/App.css”；
类BarCharts扩展React.Component{
建造师（道具）{
超级（道具）；
此.state={
数据：{
标签：[
消极的
中立的
积极的
],
数据集：[
{
标签：“值标绘”，
背景颜色：“rgba（255,99132,0.2）”，
边框颜色：“rgba（255,99132,1）”，
边框宽度：1，
hoverBackgroundColor:“rgba（255,99132,0.4）”，
hoverBorderColor:“rgba（255,99132,1）”，
数据：[65、59、80、81、56、55、40]//希望动态使用此处的值。不希望使用这些静态值
}
]
}
};
}
render（）{
常量选项={
回答：是的，
图例：{
显示：假
},
类型：“条”
};
返回(
);
}
}
导出默认条形图；

您可以映射数组，以便代码为：

state={
    analysis: {
      tonal: [],
      anxiety: []
    }
}
Analysis = async () => {
    //some api call

      const {
        ...tonalAnalysis
      } = result.scores;

      const tonalArray = Object.entries(tonalAnalysis).reduce(
        (carry, [tone, value]) => [
          ...carry,
          { tone: tone.toLowerCase(), value: parseInt(value) }
        ],
        []
      );

      this.setState({
        analysis: { ...this.state.analysis, tonal: tonalArray }
      });
      console.log("Tonal array" + JSON.stringify(this.state.analysis.tonal)); //console logs `[{"tone":"negative","value":0},{"tone":"neutral","value":91},{"tone":"positive","value":9}]`
  };

render(){
    return {
      <BarCharts values={this.state.analysis.tonal.map((entry) => entry.value)}/> // confused how to send the values as props here
}

状态={
分析：{
音调：[]，
焦虑：[]
}
}
Analysis=async（）=>{
//一些api调用
常数{
…色调分析
}=结果分数；
const tonalArray=Object.entries（tonalAnalysis）.reduce(
（进位，[音调，值]=>[
…携带，
{tone:tone.toLowerCase（），value:parseInt（value）}
],
[]
);
这是我的国家({
分析：{…this.state.analysis，音调：tonalArray}
});
console.log（“Tonal array”+JSON.stringify（this.state.analysis.Tonal））；//控制台日志`[{“tone”：“negative”，“value”：0}，{“tone”：“neutral”，“value”：91}，{“tone”：“positive”，“value”：9}]`
};
render（）{
返回{
entry.value）}/>//不知道如何将值作为道具发送到这里
}

你的柱状图应该是：

import React from "react";

import { Bar } from "react-chartjs-2";

import "./App.css";

class BarCharts extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      data: {
        labels: [
          negative,
          neutral,
          positive
        ],
        datasets: [
          {
            label: "Value plotting",
            backgroundColor: "rgba(255,99,132,0.2)",
            borderColor: "rgba(255,99,132,1)",
            borderWidth: 1,
            hoverBackgroundColor: "rgba(255,99,132,0.4)",
            hoverBorderColor: "rgba(255,99,132,1)",
            data: props.values //want to use the values here dynamically. Don't want these static values
          }
        ]
      }
    };
  }

  render() {
    const options = {
      responsive: true,
      legend: {
        display: false
      },
      type: "bar"
    };
    return (
      <Bar
        data={this.state.data}
        width={null}
        height={null}
        options={options}
      />
    );
  }
}

export default BarCharts;

从“React”导入React；
从“react-chartjs-2”导入{Bar}；
导入“/App.css”；
类BarCharts扩展React.Component{
建造师（道具）{
超级（道具）；
此.state={
数据：{
标签：[
消极的
中立的
积极的
],
数据集：[
{
标签：“值标绘”，
背景颜色：“rgba（255,99132,0.2）”，
边框颜色：“rgba（255,99132,1）”，
边框宽度：1，
hoverBackgroundColor:“rgba（255,99132,0.4）”，
hoverBorderColor:“rgba（255,99132,1）”，
数据：props.values//希望动态使用此处的值。不希望使用这些静态值
}
]
}
};
}
render（）{
常量选项={
回答：是的，
图例：{
显示：假
},
类型：“条”
};
返回(
);
}
}
导出默认条形图；

您可以映射数组，以便代码为：

state={
    analysis: {
      tonal: [],
      anxiety: []
    }
}
Analysis = async () => {
    //some api call

      const {
        ...tonalAnalysis
      } = result.scores;

      const tonalArray = Object.entries(tonalAnalysis).reduce(
        (carry, [tone, value]) => [
          ...carry,
          { tone: tone.toLowerCase(), value: parseInt(value) }
        ],
        []
      );

      this.setState({
        analysis: { ...this.state.analysis, tonal: tonalArray }
      });
      console.log("Tonal array" + JSON.stringify(this.state.analysis.tonal)); //console logs `[{"tone":"negative","value":0},{"tone":"neutral","value":91},{"tone":"positive","value":9}]`
  };

render(){
    return {
      <BarCharts values={this.state.analysis.tonal.map((entry) => entry.value)}/> // confused how to send the values as props here
}

状态={
分析：{
音调：[]，
焦虑：[]
}
}
Analysis=async（）=>{
//一些api调用
常数{
…色调分析
}=结果分数；
const tonalArray=Object.entries（tonalAnalysis）.reduce(
（进位，[音调，值]=>[
…携带，
{tone:tone.toLowerCase（），value:parseInt（value）}
],
[]
);
这是我的国家({
分析：{…this.state.analysis，音调：tonalArray}
});
console.log（“Tonal array”+JSON.stringify（this.state.analysis.Tonal））；//控制台日志`[{“tone”：“negative”，“value”：0}，{“tone”：“neutral”，“value”：91}，{“tone”：“positive”，“value”：9}]`
};
render（）{
返回{
entry.value）}/>//不知道如何将值作为道具发送到这里
}

你的柱状图应该是：

import React from "react";

import { Bar } from "react-chartjs-2";

import "./App.css";

class BarCharts extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      data: {
        labels: [
          negative,
          neutral,
          positive
        ],
        datasets: [
          {
            label: "Value plotting",
            backgroundColor: "rgba(255,99,132,0.2)",
            borderColor: "rgba(255,99,132,1)",
            borderWidth: 1,
            hoverBackgroundColor: "rgba(255,99,132,0.4)",
            hoverBorderColor: "rgba(255,99,132,1)",
            data: props.values //want to use the values here dynamically. Don't want these static values
          }
        ]
      }
    };
  }

  render() {
    const options = {
      responsive: true,
      legend: {
        display: false
      },
      type: "bar"
    };
    return (
      <Bar
        data={this.state.data}
        width={null}
        height={null}
        options={options}
      />
    );
  }
}

export default BarCharts;

从“React”导入React；
从“react-chartjs-2”导入{Bar}；
导入“/App.css”；
类BarCharts扩展React.Component{
建造师（道具）{
超级（道具）；
此.state={
数据：{
标签：[
消极的
中立的
积极的
],
数据集：[
{
标签：“值标绘”，
背景颜色：“rgba（255,99132,0.2）”，
边框颜色：“rgba（255,99132,1）”，
边框宽度：1，
hoverBackgroundColor:“rgba（255,99132,0.4）”，
hoverBorderColor:“rgba（255,99132,1）”，
数据：props.values//希望动态使用此处的值。不希望使用这些静态值
}
]
}
};
}
render（）{
常量选项={
回答：是的，
图例：{
显示：假
},
类型：“条”
};
返回
//This method can be reused in a hook or in a lifecycle method to keep data updated.
const extractValues = (data) => {
  return data.map( d => d.value);
}