为什么todo项目不会在所需的反应组件中呈现？ （asp.net core 2.0 / reactjs / typescript）

Question

寻找一些帮助/指导我做错了什么。我是React / Typescript的新手，这是我的第一个演示应用程序。我的环境是使用asp.net core 2.0，react和typescript的Visual Studio 2017社区。我的出发点是使用反应锅炉项目模板。

我无法从getTodos组件ToDoItem.tsx中获取getTodosApi方法中的todo项目;但是，当我省略该组件并且只是内联ToDoList组件的render方法中的LI标签之间的{item.title}时（index.tsx），它打印出来就好了。希望得到一些解决这个问题的帮助/指导。提前谢谢！

以下是一些屏幕截图：
Rendering from ToDoList component (Desired Result, but not desired component)
Unable to render todo items in desired ToDoItem component

我在下面列出了我正在使用的2个文件。

//*** index.tsx ***

import * as React from 'react';
import { RouteComponentProps } from 'react-router';
import { TodoItem, ITodoItemProps } from './ToDoItem';
import './css/index.css';

const getTodosApi = () => {
    return [
        {
            id: '1',
            title: 'task 1',
            completed: false
        },
        {
            id: '2',
            title: 'task 2',
            completed: false
        },
        {
            id: '3',
            title: 'task 3',
            completed: false
        }
    ];
}

interface ITodoItem {
    id: string,
    title: string,
    completed: boolean
}

interface ITodoListState {
    todos: ITodoItem[];
}

type ITodoListProps = RouteComponentProps<{}>;

export class TodoList extends React.Component<ITodoListProps, ITodoListState> {

    constructor() {
        super();
        this.state = {
            todos: []
        };
    }

    componentDidMount() {
        const todos = getTodosApi();
        this.updateTodoState(todos)
    }

    getTodosFromState = () => this.state.todos ? this.state.todos : []; 

    updateTodoState = (todos: ITodoItemProps[]) => {
        this.setState({
            todos: todos
        })
    }

    handleAddingTodoItem = (todoItem: ITodoItemProps) => {
        let todos = this.getTodosFromState()
        todos.push(todoItem);
        this.updateTodoState(todos);
    }

    handleDeletingTodoItem = (selectedItemToDelete: ITodoItemProps) => {
        const todos = this.getTodosFromState().filter(stateItem => selectedItemToDelete.title !== stateItem.title);
        this.updateTodoState(todos);
    }

    getTodoItemComponents = () => {

        const items = this.getTodosFromState();
        return [...items].map((item: ITodoItemProps) => {
            return (

                //THIS RENDERS EACH TODO ITEM
                //<li>{item.title}</li>

                //THIS DOES NOT RENDER EACH TODO ITEM
                <TodoItem key={item.id} { ...item } />

                //NOR, DOES THIS WORK...
                //<TodoItem
                //    completed={item.completed}
                //    id={item.id}
                //    title={item.title}
                //    key={item.id}
                ///>
            );
        });
    }

    public render () {
        return (
            <div id="todo-list">
                <h2>To Do Items</h2>
                <ul>{ this.getTodoItemComponents() }</ul>
            </div>
        );
    }
}


/**************************************/

//*** ToDoItem.tsx ***

/* HAVE ISSUE WITH GETTING EACH TODO ITEM TO PRINT OUT FROM THIS COMPONENT */

import * as React from 'react';
import './css/todoItem.css';

export interface ITodoItemProps {
    id: string,
    title: string,
    completed: boolean
}

export interface ITodoItemExtProps extends ITodoItemProps {
    key: string;
}

export const TodoItem = (props: ITodoItemExtProps) => {
    return (
        <li>
            <div className="todo-item">
                {props.title}
            </div>
        </li>
    );
};

这是我的项目中加载的内容（ASP.net core 2.0，React，Typescript）：

"devDependencies": {
    "@types/history": "4.6.0",
    "@types/react": "15.0.35",
    "@types/react-dom": "15.5.1",
    "@types/react-hot-loader": "3.0.3",
    "@types/react-router": "4.0.12",
    "@types/react-router-dom": "4.0.5",
    "@types/webpack-env": "1.13.0",
    "aspnet-webpack": "^2.0.3",
    "aspnet-webpack-react": "^3.0.0",
    "awesome-typescript-loader": "3.2.1",
    "bootstrap": "3.3.7",
    "css-loader": "0.28.4",
    "eslint-config-airbnb": "^16.1.0",
    "eslint-plugin-import": "^2.12.0",
    "eslint-plugin-jsx-a11y": "^6.0.3",
    "eslint-plugin-react": "^7.8.2",
    "event-source-polyfill": "0.0.9",
    "extract-text-webpack-plugin": "^2.1.2",
    "file-loader": "0.11.2",
    "isomorphic-fetch": "2.2.1",
    "jquery": "3.2.1",
    "json-loader": "0.5.4",
    "react": "15.6.1",
    "react-dom": "15.6.1",
    "react-hot-loader": "3.0.0-beta.7",
    "react-router-dom": "4.1.1",
    "style-loader": "0.18.2",
    "typescript": "2.4.1",
    "url-loader": "0.5.9",
    "webpack": "^2.5.1",
    "webpack-hot-middleware": "^2.18.2"
}

Answer 1

好吧，看起来这是我的IDE的缓存情况。这段代码按照我的希望运作。