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

Question

我的状态是一个包含数组的对象，而该数组包含一个看起来像这样的对象[{"tone":"negative","value":0},{"tone":"neutral","value":91},{"tone":"positive","value":9}]。

因此，我只想使用此对象数组中的值来绘制条形图。我想将这些值发送到另一个组件，该组件可用于动态绘制条形图。但是我不确定该怎么做。有人可以显示如何将值发送到barchart组件并在barchart中使用它们吗？

这是代码

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
}

我将使用的条形图组件

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;

Answer 1

您可以映射数组，因此您的代码将是：

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
}

您的图表将是：

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;

Answer 2

只需在组件声明中添加所需的道具：

<BarCharts data={this.state.analysis}/> 

并且在BarChart组件上，您只需要从数组中提取值，以防万一您需要相同的结构：

...
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: extractValues(this.props.data)
          }
        ]
      }
...

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