javascript - 为什么不把 Prop 传给 child 呢？

Question

我试图将两个值作为 props 从 React 组件“App”传递给他的 child “Todo”。我正在传递值标题并从 json 占位符 API 完成。JSON 对象是正确的，我已经检查过了。

问题是子组件仅显示第一个值“title”，而不显示第二个值。此外，React 控制台显示我的子组件构造函数是一个无用的构造函数，我不明白。我应该使用 props 调用构造函数以在组件中使用它们，对吗？

谢谢。

App.jsx:

import React from 'react'
import Todo from './Todo'

import '../styles/Todo.css'

class App extends React.Component {
    constructor() {
        super();
        this.state = {
            todos: []
        }
    }

    render() {
        return (
            <div className="todo-list">
                <Todo title="Hello" completed={false}></Todo> // HERE
            </div>
        );
    }
}

export default App;

Todo.jsx

import React from 'react';

import "../styles/Todo.css"

class Todo extends React.Component {
    constructor(props){ // USELESS CONSTRUCTOR?
        super(props);
    }
    render(){
        return(
            <div className="todo-item">
                <input type="checkbox" />
                <p> {this.props.title} </p>
                <p> {this.props.completed} </p> // NOT DISPLAYING
            </div>
        );
    }
}

export default Todo;

Answer 1

当您没有状态但有空构造函数时，它是无用，最好将其删除。

关于值不显示，completed是boolean值，你可以这样做。

<p> {this.props.completed.toString()} </p> // NOT DISPLAYING