初学者问题。我知道这是一个简单的问题，但我无法让它工作。我正在将一个包含 k:v 对数组的对象传递给一个组件。最终，这个 props 将包含多个 k:v 对，但现在我只传递一个。

[{goal: 20000}]

在组件中，我试图获取值 20000，以便我可以将其显示在屏幕上。我似乎无法只得到数字。如果我查看 props.goal，我会得到整个 k:v。

[{goal: 20000}]

如果我尝试 props[0].goal，我会得到“TypeError：undefined 不是对象（评估‘props[0].goal’）”

我遗漏了什么？感谢您的帮助。

更新： 以下是相关组件的完整代码。

import { React, useState } from "react";
import Form from "react-bootstrap/Form";
import { Row, Col, Button } from "react-bootstrap";
import "./../css/Goal.css";

const Goal = (props) => {
  // const [goal, setGoal] = useState("");
  const [record, setRecord] = useState("");
  const monthlyGoal = 2;

  console.log("props[0]");
  console.log(props[0]); //undefined
  console.log("props");
  console.log({ props }); //See below

props: Object

goal: Object

goals: [{goal: 20000}] (1)

const handleInput = (event) => {
    console.log(event);
    event.preventDefault();
    setRecord(event.target.value);
    console.log(record);
  };

  const defaultOptions = {
    significantDigits: 2,
    thousandsSeparator: ",",
    decimalSeparator: ".",
    symbol: "$",
  };

  const formattedMonthlyGoal = (value, options) => {
    if (typeof value !== "number") value = 0.0;
    options = { ...defaultOptions, ...options };
    value = value.toFixed(options.significantDigits);

    const [currency, decimal] = value.split(".");
    return `${options.symbol} ${currency.replace(
      /\B(?=(\d{3})+(?!\d))/g,
      options.thousandsSeparator
    )}${options.decimalSeparator}${decimal}`;
  };

  return (
    <Form>
      <Row className="align-items-center flex">
        <Col sm={3} className="goal sm={3}">
          <Form.Control
            id="inlineFormInputGoal"
            placeholder="Goal"
            // onChange={(e) => setGoal(e.target.value)}
          />
          <Button type="submit" className="submit btn-3" onSubmit={handleInput}>
            Submit
          </Button>
        </Col>
        <Col>
          <h1 className="text-box">
            Goal: {formattedMonthlyGoal(monthlyGoal)}
          </h1>
        </Col>
      </Row>
    </Form>
  );
};
export default Goal;

更新 2：以下是父组件：

import React, { useEffect, useState } from "react";
import Goal from "./Goal";
import axios from "axios";

const Dashboard = () => {
  const [dashboardinfo, setdashboardinfo] = useState([]);
  useEffect(() => {
    async function fetchData() {
      try {
        const data = (await axios.get("/api/goals/getgoals")).data;
        setdashboardinfo(data);
      } catch (error) {
        console.log(error);
      }
    }
    fetchData();
  }, []);

  return (
    <React.Fragment>
      <Goal dashboardinfo={dashboardinfo} />
     
    </React.Fragment>
  );
};

export default Dashboard;