Javascript 为什么赢了'；我的子组件渲染道具？

我已经为我正在尝试制作的应用程序设置了带有节点后端的React前端。我已经成功创建了一个服务器，它承载着我的数据，然后我可以访问并接收到我的React前端。我能够console.log我想要的数据，并成功地将其保存到状态（我想？）。我的问题是，我似乎无法将状态中包含的信息实际传递到子组件中

Units.js

import UnitsCard from "./InfoCardUnits";
import React, { Component } from "react";
const axios = require("axios");

class Units extends Component {
  constructor(props) {
    super(props);
    this.state = {
      units: []
    };
  }

  fetchData() {
    axios
      .get("http://localhost:3001/allData/units")
      .then(response => {
        // handle success
        // console.log("Success");
        this.setState({ units: response.data });
      })
      .catch(error => {
        // handle error
        console.error(error);
      });
  }

  componentDidMount() {
    this.fetchData();
  }

  render() {
    // this console.log will show the data I want to send as props into my child component.
    console.log(this.state.units[0]);
    return <UnitsCard props={this.state.units[0]} />;
  }
}

export default Units;

从“/InfoCardUnits”导入单位；
从“React”导入React，{Component}；
常量axios=要求（“axios”）；
类单元扩展组件{
建造师（道具）{
超级（道具）；
此.state={
单位：[]
};
}
fetchData（）{
axios
.get（“http://localhost:3001/allData/units")
。然后（响应=>{
//成功
//控制台日志（“成功”）；
this.setState（{units:response.data}）；
})
.catch（错误=>{
//处理错误
控制台错误（error）；
});
}
componentDidMount（）{
这是fetchData（）；
}
render（）{
//这个console.log将显示我想作为道具发送到我的子组件中的数据。
console.log（this.state.units[0]）；
返回；
}
}
导出默认单位；

InfoUnitCard.js

import "../index.css";

function UnitsCard(props) {
  // this console.log will show the "props" information that I want to use in my unit card. But the information itself won't actually show in the browser.
  console.log(props);
  return (
    <div className="card">
      <h2>{props.name}</h2>
      <h2>{props.category}</h2>
      <h2>{props.inf_melee}</h2>
    </div>
  );
}

export default UnitsCard;

导入“./index.css”；
功能单元SCARD（道具）{
//此console.log将显示我想在我的单位卡中使用的“道具”信息。但这些信息本身实际上不会显示在浏览器中。
控制台日志（道具）；
返回(
{props.name}
{props.category}
{props.inf_近战}
);
}
导出默认单位scard；

当I console.log在任一组件中记录状态时，它会成功显示我试图发送的信息。但我实际上无法获得要渲染的信息。任何帮助或见解都将不胜感激

---

编辑：这个问题已经解决了，非常感谢所有参与回答的人

您在子组件中传递的每个内容都将在子组件的props对象中可用。在您的情况下，您正在将“props”传递给props对象。这应该作为This.props.props.keyname提供。尝试按如下所示更改子组件

function UnitsCard(props) {
  // this console.log will show the "props" information that I want to use in my unit card. But the information itself won't actually show in the browser.
  console.log(props);
  return (
    <div className="card">
      <h2>{props.props.name}</h2>
      <h2>{props.props.category}</h2>
      <h2>{props.props.inf_melee}</h2>
    </div>
  );
}

function UnitsCard（道具）{
//此console.log将显示我想在我的单位卡中使用的“道具”信息。但这些信息本身实际上不会显示在浏览器中。
控制台日志（道具）；
返回(
{props.props.name}
{props.props.category}
{props.props.inf_近战}
);
}

避免通过

props

关键字传递道具。相反，考虑对代码进行以下更改：

render() {

    // Get unit or empty object (makes code more readable in next step)
    const unit = this.state.units[0] || {};

    // Pass each piece of unit data in as a separate prop
    return <UnitsCard 
      name={unit.name} 
      category={unit.category} 
      inf_melee={unit.inf_melee} />;
 }

render（）{
//获取单元或空对象（使代码在下一步更具可读性）
const unit=this.state.units[0]|{}；
//将每个单位数据作为单独的道具传入
返回；
}

或者，您可以使用ES6提供的“spread”语法使其更加简洁：

render() {

    // Get unit or empty object (makes code more readable in next step)
    const unit = this.state.units[0] || {};

    // Use spread operator to simplify passing of props to UnitsCard
    return <UnitsCard {...unit} />;
 }

render（）{
//获取单元或空对象（使代码在下一步更具可读性）
const unit=this.state.units[0]|{}；
//使用排列运算符简化道具到UnitsCard的传递
返回；
}

您将道具命名为

props

，因此您可以使用以下代码访问道具：

console.log(props.props);

您可以使用不同的名称传递like：

<UnitsCard child={this.state.units[0]} />

---

请注意，在提取数据之前，

此.state.units[0]

是未定义的。你想以某种方式处理这种情况。是的，在我得到包含正确信息的console.log之前，我得到了一个未定义的console.log。您对如何修复它或什么是最佳实践有什么建议吗？或者

@FelixKling感谢您的反馈！我刚刚更新了答案以包含您的建议-再次感谢：-）

<h2>{props.child.name}</h2>