反应不渲染传递的道具答案

【问题标题】：React not rendering passed in props反应不渲染传递的道具
【发布时间】：2020-08-21 11:28:48
【问题描述】：

我正在学习一个关于 React.js 的教程，以制作一个 Todo 应用程序为例。

App.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正在传递。

【问题讨论】：

阅读this article 了解调试技巧。我建议你也安装 React 开发者工具并学习如何使用它们。它们对于追踪 React 应用中的问题非常有帮助。

标签： javascript reactjs

【解决方案1】：

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

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

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

所以当你映射this.state.todos时，你拉出的'item'实际上是todos中的单个项目，实际上是整个Data数组！（不是你想要的Data 中的项目）

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

把它改成这个，它应该可以工作了。

this.state = { todos: Data }

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

【讨论】：

由于[ ...Data ]是浅拷贝，如果任何其他文件在数组中的对象中设置属性，您仍然会遇到问题。
啊，很好，非常正确。我会把那一点拿出来。不要以为在学习 React 的教程示例中开始讨论对象的深度克隆数组的范围！

【解决方案2】：

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

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

【讨论】：