Reactjs Typescript - 在从父组件渲染方法创建的子组件中未初始化属性答案

【问题标题】：Reactjs Typescript - Properties are not initialised in child component created from parent component render methodReactjs Typescript - 在从父组件渲染方法创建的子组件中未初始化属性
【发布时间】：2020-01-31 14:15:09
【问题描述】：

您好，我正在尝试使用 Typescript 学习 React。

我遇到了一个问题，即没有在从父组件渲染方法创建的子组件中初始化属性。

在父组件的渲染方法中，控制台日志打印列表项。如果我取消注释子组件的构造函数，我可以看到属性为空。

ReactJs 中渲染子组件和传递属性的正确方法是什么？

已解决 解决了这个！问题出在 RestDataSource.getCourses() 的代码中。这没有转换为属性模型。 Rest API 返回的 JSON 包括 CourseID 和 CourseName 属性。反应子组件 Course 包括属性 courseID 和 courseName。通过确保属性完全匹配来修复。

CourseList.ts（父）

import * as React from 'react';

import Course from './Course';
import { CourseProps } from './Course';
import { RestDataCourse } from '../data/RestDataCourse';

type CourseListProps = {};

type CourseListState = {
  courses: Array<CourseProps>;
};

export default class CourseList extends React.Component<
  CourseListProps,
  CourseListState
> {
  constructor(props: CourseListProps) {
    super(props);
    this.state = { courses: new Array<CourseProps>() };
  }

  async componentDidMount(): Promise<void> {
    console.log('CourseList::componentDidMount');

    const dataSource: RestDataCourse = new RestDataCourse();
    const coursesList: Array<CourseProps> = await dataSource.getCourses();

    this.setState({ courses: coursesList });
  }

  async componentWillUnmount(): Promise<void> {
    console.log('CourseList::componentWillUnmout');
  }

  public render(): JSX.Element {
    console.log('CourseList::render => ' + JSON.stringify(this.state.courses));
    return (
      <div>
        {this.state.courses.map(c => (
          <Course
            key={c.courseID}
            courseID={c.courseID}
            courseName={c.courseName}
          />
        ))}
      </div>
    );
  }
}

Course.ts（儿童）

import * as React from 'react';

export interface CourseProps {
  courseID: string;
  courseName: string;
}

export default class Course extends React.Component<CourseProps, {}> {
  // constructor(props: CourseProps) {
  //   super(props);
  //   console.log(`Course::constructor => ${JSON.stringify(props)}`);
  // }

  componentDidMount(): void {
    console.log('Course::componentDidMount');
  }

  componentWillUnmount(): void {
    console.log('Course::componentWillUnmout');
  }

  public render(): JSX.Element {
    console.log(
      JSON.stringify(`Course::render => ${JSON.stringify(this.props)}`),
    );
    return (
      <div>
        Course render
        {this.props.courseID}
        {this.props.courseName}
      </div>
    );
  }
}

【问题讨论】：

标签： reactjs typescript

【解决方案1】：

解决了这个问题！问题出在 RestDataSource.getCourses() 的代码中。这没有转换为属性模型。从 Rest API 返回的 JSON 属性包括 CourseID 和 CourseName 属性。反应子组件 Course 包括属性 courseID 和 courseName。通过确保属性完全匹配来修复。

【讨论】：