Question

我认为问这个问题可能很愚蠢，但请相信我，我没有找到答案。我正在通过道具将数据传递给子组件，但卡住了并且出错了。通常，我在表单提交中传递数据（我的意思是，当用户键入某些内容并单击提交时），我通过props在子组件中显示数据，但是在应用程序的初始呈现时出现错误props is undefined。实际上，我对defaultProps有所了解，但我认为在类基础组件中可能是可行的。我想在功能组件中执行类似defaultProps的操作，但是有人可能会帮助我实现我的目标，我感到很困惑。

代码

 import React from "react";

const ViewCourse = () => {
  return (
    <div>
      {this.props.courses.map(newData => (
        <div>{newData.title}</div>
      ))}
    </div>
  );
};

export default ViewCourse;

Answer 1

您可以使用classname.defaultProps来分配初始值。另外，要访问功能组件中的道具，您还必须将其作为参数传递。

import React from "react";

const ViewCourse = (props) => (
  <div>
    {props.courses.map(newData => (
      <div>{newData.title}</div>
    ))}
  </div>
);

export default ViewCourse;

ViewCourse.defaultProps = {
  courses: [],
}

Answer 2

您正在使用功能组件。您必须在参数中添加道具。

const ViewCourse = (props) => {
  // use props here.
};

Answer 3

在功能组件 props 中是自变量。

import React from "react";

const ViewCourse = (props) => {
  return (
    <div>
      {props.courses.map(newData => (
        <div>{newData.title}</div>
      ))}
    </div>
  );
};

export default ViewCourse;

如何在初始渲染时传递自定义道具

3 个答案: