在 React 中通过 props 传递对象数组

Question

（已解决）：解决方案是 chart.js 和 React 版本之间的兼容性问题。最近更新react版本解决了。

我很难找到解决这个问题的方法，也许有人会知道为什么会出现这个错误：我通过道具传递对象数组，但在使用道具时出现错误：对象数组示例（得分数据通过 API 馈入并且正在运行）：

var teamData = [
  {
    teamName: "Cowboys",
    score: 0,
    color: "rgba(0, 34, 68, 0.9)",
  },
  {
    teamName: "Cardinals",
    score: 0,
    color: "rgba(135, 0, 39, 0.9)",
  },
  {
    teamName: "Patriots",
    score: 0,
    color: "rgba(0, 21, 50, 0.9)",
  },
  {
    teamName: "49ers",
    score: 0,
    color: "rgba(170, 0, 0.9)",
  },

App.js 例子

const App = () => {
  getData();
  return (
    <div>
      <Header />
      <BarChart teamData={teamData} />
      <Calculator teamData={teamData} />
      <Footer />
    </div>
  );
};

export default App;

这里是我将 props 逐一插入 chart.js 组件的地方（{props[0].score} 是错误所在，它说：SyntaxError C:\Users\name\Documents\Websites\React Based\madden-ranker\src\components\BarChart.js: Unexpected token, expected "," (14:37):

import React from "react";
import { Bar, HorizontalBar } from "react-chartjs-2";

const BarChart = (props) => {

  return (
    <HorizontalBar
      // prettier-ignore
      data={{
                labels: ['Team1' ],
                datasets: [
                    {
                        label: 'Cumulative Score',
                        data: [{props[0].score}, 19, 3, 5, 2, 3, 100, 19, 3, 5, 2, 3, 5, 2, 3, 100, 19, 3, 5, 2, 3, 100, 19, 3, 5, 2, 3, 5, 2, 3, 10, 20],
                        backgroundColor: []

                    },
                ],
            }}
      height={500}
      width={600}
      options={{
        maintainAspectRatio: false,
        scales: {
          y: {
            beginAtZero: true,
          },
        },
      }}
    />
  );
};

export default BarChart;

有趣的是，我尝试将控制台记录到 teamData 组件中并得到： line5: console.log(道具); 第 6 行：console.log(props.teamData[0].score);

.

Answer 1

我认为你在不应该出现的地方使用了一些逗号

试试这个

   const BarChart = (props) => {

      return (
        <HorizontalBar
          // prettier-ignore
          data={{
                    labels: ['Team1' ],
                    datasets: [
                        {
                            label: 'Cumulative Score',
                            data: [{props[0].score}, 19, 3, 5, 2, 3, 100, 19, 3, 5, 2, 3, 5, 2, 3, 100, 19, 3, 5, 2, 3, 100, 19, 3, 5, 2, 3, 5, 2, 3, 10, 20],
                            backgroundColor: []
    
                        }
                    ]
                }}
          height={500}
          width={600}
          options={{
            maintainAspectRatio: false,
            scales: {
              y: {
                beginAtZero: true,
              }
            }
          }}
        />
      );
    };

Answer 2

只需要在渲染之前添加一个条件来检查props[0]是否存在，因为第一次props是空的，当你从API获取数据后setstate时，组件会重新渲染。希望这对您有所帮助。

在 React 中通过 props 传递对象数组

Passing an array of objects through props in React

compiler-errors

reactjs

react-props