Reactjs 道具返回子元素中的空对象

我在React和编程方面都是全新的

我需要创建一个问候小部件，它根据一天中的时间为用户显示问候语。此时将从本地JSON文件中检索用户名

这是我的父组件（问候小部件）：

import React from "react";
import Greeting from "../UserGreeting/Greeting";
import "./greeting-widget.scss";
import database from "../../../db.json";

export const Widget = () => {
  const user = database.userData;

  return (
    <div>
      <div className="clock">This will later be a clock</div>
      <Greeting name={user.userName} />
    </div>
  );
};

export default Widget;

import React from "react";
import GreetingWidget from "../components/GreetingWidget/GreetingWidget";

export default {
  title: "Components / Greeting Widget",
};

export const Widget = () => {
  return <GreetingWidget />;
};

从“React”导入React；
从“./UserGreeting/Greeting”导入问候语；
导入“/greeting widget.scss”；
从“../../../db.json”导入数据库；
导出常量小部件=（）=>{
const user=database.userData；
返回(
这将是一个时钟
);
};
导出默认窗口小部件；

这是我的子组件

import React from "react";
import "./greeting.scss";
import PropTypes from "prop-types";

const Greeting = (props) => {
  console.log(props);

  const greetingText = () => {
    const now = new Date();
    const currentHour = now.getHours();
    if (currentHour >= 4 && currentHour < 12) return "Good Morning";
    else if (currentHour >= 12 && currentHour <= 17) return "Good Afternoon";
    else return "Good Evening";
  };

  return (
    <div className="greeting-wrapper">
      {greetingText()}, {props.name}.
    </div>
  );
};

export default Greeting;

Greeting.propTypes = {
  name: PropTypes.string,
};

从“React”导入React；
导入“/greeting.scss”；
从“道具类型”导入道具类型；
常量问候语=（道具）=>{
控制台日志（道具）；
const greetingText=（）=>{
const now=新日期（）；
const currentHour=now.getHours（）；
如果（currentHour>=4&¤tHour<12）返回“早上好”；
如果（当前小时>=12&¤tHour{
返回；
};

但子组件不显示用户名，console.log也返回空对象。

子组件故事书

import React from "react";
import GreetingComponent from "../components/UserGreeting/Greeting";

export default {
  title: "Components / User Greeting",
};

export const Greeting = () => {
  return <GreetingComponent />;
};

从“React”导入React；
从“./components/UserGreeting/Greeting”导入问候组件；
导出默认值{
标题：“组件/用户问候语”，
};
导出常量问候语=（）=>{
返回；
};

我不明白为什么我在主组件中得到了正确的结果，而在子组件中却没有得到任何结果。起初我认为可能是因为我试图从JSON文件中检索信息，但我尝试在父组件中硬编码用户名，然后将道具传递给子组件。但同样的问题仍然存在。我做错了什么我应该做些什么来改善这一点

---

谢谢您的帮助。

尝试执行

props

解构

。您可以将它们解构到

{name}

，而不是直接作为

props

或任何

参数来接收：-

然而，根据上面的例子，在我看来，您的
工作只是在
父组件中找到，因为您发送了名称道具。
但是如果您刚刚调用了
子组件
（
问候语
）通过本身，当然
道具
将是空的。因为它需要
名称
道具
通过它
父组件
。这就是为什么我认为您的
子组件
没有显示任何内容。如果是这样，那么以下修复将无法帮助您

修正1

子组件


Greeting.js
（子组件），从“../../../db.json”
此处导入数据库：-

你可以忽略修复程序1和修复程序2如果你使用修复程序3试试这个，我简化了同一个文件中的代码，它似乎适合我

import React from "react";
import PropTypes from "prop-types";

const Widget = () => {
  const user = "I am Test User";

  return (
    <div>
      <div className="clock">This will later be a clock</div>
      <Greeting name={user} />
    </div>
  );
};

const Greeting = (props) => {
  console.log(props);

  const greetingText = () => {
    const now = new Date();
    const currentHour = now.getHours();
    if (currentHour >= 4 && currentHour < 12) return "Good Morning";
    else if (currentHour >= 12 && currentHour <= 17) return "Good Afternoon";
    else return "Good Evening";
  };

  return (
    <div className="greeting-wrapper">
      {greetingText()}, {props.name}.
    </div>
  );
};

Greeting.propTypes = {
  name: PropTypes.string,
};

export default Widget;

从“React”导入React；
从“道具类型”导入道具类型；
常量小部件=（）=>{
const user=“我是测试用户”；
返回(
这将是一个时钟
);
};
常量问候语=（道具）=>{
控制台日志（道具）；
const greetingText=（）=>{
const now=新日期（）；
const currentHour=now.getHours（）；
如果（currentHour>=4&¤tHour<12）返回“早上好”；
否则，如果（currentHour>=12&¤tHour）尝试只测试并在子级中查看console打印“test”？我已尝试。如果我打印console.log（props.name），它将返回未定义。如果我打印console.log（props）它返回空对象。请共享所有4个组件代码。其他组件将不会在父组件中使用。仍然会遇到相同的问题。是否尝试单独访问
子组件
？是的，我为父组件和子组件创建了单独的故事书（请参阅编辑后的文章，其中我添加了其他故事书代码片段）。问题是否存在于子组件故事书代码中？我已经尝试了您建议的第二种方法。当道具未发送且数据库直接导入到子组件中时，它似乎工作正常。是的。它会工作。无论如何，我已更新了上面的答案。尝试修复3。我认为这将修复您的问题。您不需要修复1&F如果使用修复3，则使用ixes 2
import React from "react";
import Greeting from "../UserGreeting/Greeting";
import "./greeting-widget.scss";

export const Widget = () => {
  return (
    <div>
      <div className="clock">This will later be a clock</div>
      <Greeting />
    </div>
  );
};

export default Widget;

import React from "react";
import "./greeting.scss";
import PropTypes from "prop-types";
import database from "../../../db.json";

const Greeting = () => {
  const user = database.userData;

  const greetingText = () => {
    const now = new Date();
    const currentHour = now.getHours();
    if (currentHour >= 4 && currentHour < 12) return "Good Morning";
    else if (currentHour >= 12 && currentHour <= 17) return "Good Afternoon";
    else return "Good Evening";
  };

  return (
    <div className="greeting-wrapper">
      {greetingText()}, {user.name}.
    </div>
  );
};

export default Greeting;

import React from "react";
import GreetingComponent from "../components/UserGreeting/Greeting";
import database from "../../../db.json";

export default {
  title: "Components / User Greeting",
};

export const Greeting = () => {
  const user = database.userData;
  return <GreetingComponent name={user.data} />;
};

import React from "react";
import PropTypes from "prop-types";

const Widget = () => {
  const user = "I am Test User";

  return (
    <div>
      <div className="clock">This will later be a clock</div>
      <Greeting name={user} />
    </div>
  );
};

const Greeting = (props) => {
  console.log(props);

  const greetingText = () => {
    const now = new Date();
    const currentHour = now.getHours();
    if (currentHour >= 4 && currentHour < 12) return "Good Morning";
    else if (currentHour >= 12 && currentHour <= 17) return "Good Afternoon";
    else return "Good Evening";
  };

  return (
    <div className="greeting-wrapper">
      {greetingText()}, {props.name}.
    </div>
  );
};

Greeting.propTypes = {
  name: PropTypes.string,
};

export default Widget;