反应不渲染传递的道具

Question

我正在关注 React.js 的教程，以制作 Todo 应用程序为例。

应用程序.js

import React, { Component } from 'react';
import TodoItem from "./components/TodoItem";
import Data from "./Data";

class App extends Component {
    constructor(){
        super();
        this.state = { todos:[Data] }
    }
    render() {
        const TodoItems = this.state.todos.map(item =>
            <TodoItem key={item.id} item={item} />)
        return (
            <div>
                {todoItems}
            </div>
        )
    }
}
export default App;

TodoItem.js

import React from 'react';

function TodoItem (props) {
    return (
        <div>
            <input type="checkbox" checked={props.item.completed} />
            <p>{props.item.text}</p>
        </div>
    )
}
export default TodoItem;

Data.js 只是一个数组

const Data = [{id: 1, text: "Some random text", completed: true}, //and so on... ]

当我运行它时，浏览器只呈现一个复选框，没有别的。 有什么我想念的吗？ 我通过 chrome 检查了开发工具，看到有 props 正在传递。

Answer 1

问题是这样的： this.state = { todos:[Data] }

这不会像我认为你打算做的那样将Data的内容放入todos中，它使todos成为一个包含Data的数组，它本身就是一个数组，即：

todos = [ [ {id: 1, text: "Some random text", completed: true}, ... ] ]

因此，当您在 this.state.todos 上this.state.todos时，您拉出的“ item ”实际上是todos中的单个项目，实际上是整个Data数组！ （不是您想要的Data中的项目）

该数组没有text属性，因此不显示文本。 它当然也没有completed的属性，但复选框不需要该属性存在即可呈现，因此您只会看到一个没有文本的单个复选框。

将其更改为此，它应该可以工作。

this.state = { todos: Data }

一个不相关的事情，肯定只是这里代码中的复制/粘贴错字，但为了完整起见，你有const TodoItems =...但然后在 JSX 中引用{todoItems} 。 我想这应该是const todoItems =... 。

Answer 2

首先，最重要的是，您需要从Data.js文件中导出数据。 其次，您如何显示Data变量，我假设它是一个数组，因此您可以直接在 state 中设置它，而无需将其封装在方括号中。

我还更新了TodoItem以确保文本与复选框内联。 查看下面的代码沙箱链接！