Question

我正在关注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检查了开发工具，发现正在传递道具。

Answer 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 = ...。

Answer 2

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

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

反应不渲染道具传递

2 个答案: