Почему элементы рендеринга не отображаются в нужном компоненте реакции?(asp.net core 2.0 /actjs / typescript)

Question

Нужна помощь / руководство в том, что я делаю неправильно.Я новичок в React / Typescript, и это мое первое демонстрационное приложение.Моя среда Visual Studio 2017 Community, использующая asp.net core 2.0, реагирует и набирает текст.Моя отправная точка - использование шаблона проекта реагирующего котла.

Я не могу получить элементы todo из метода getTodosApi для печати в компоненте ToDoItem ToDoItem.tsx);однако, когда я опускаю этот компонент и просто вставляю {item.title} между тегами LI в методе рендеринга компонента ToDoList (index.tsx), он распечатывается очень хорошо.Был бы признателен за помощь / руководство в решении этой проблемы.Заранее спасибо!

Вот пара снимков экрана: Рендеринг из компонента ToDoList (желаемый результат, но не желаемый компонент) Невозможно отобразить элементы todo в желаемом компоненте ToDoItem Я включил ниже 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.Этот код работает, как я и надеялся.