反應不渲染傳遞的道具

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以確保文本與復選框內聯。 查看下面的代碼沙箱鏈接！