Question

我已经为我要制作的应用设置了带有Node后端的React前端。我已经成功创建了一个服务器来托管我的数据，然后我可以访问该服务器并将其接收到我的React Frontend中。我能够console.log记录所需的数据，并成功将其保存到状态（我认为呢？）。我的问题是，我似乎无法真正将State中包含的信息传递给子组件。

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;

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;

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

编辑：这个问题已经解决，非常感谢每个回答答案的人。

Answer 1

您在子组件中传递的所有内容都将在子组件的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>
  );
}

Answer 2

避免通过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} />;
 }

或者，您可以使用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} />;
 }

Answer 3

您将道具命名为props，因此可以使用以下代码进行访问：

console.log(props.props);

您可以使用其他名称通过

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

然后使用props.child访问道具，因此您的代码将更改为：

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

为什么我的子组件不渲染道具？

3 个答案: