Как отобразить список функциональных компонентов

Question

Я создаю базовое приложение Todo с ReactJS и хочу отобразить список задач. Я превратил todo в функциональный компонент и создаю TodoList компонент, который должен отображать список. Проблема в том, что при нажатии кнопки add задача не добавляется в список, поэтому список всегда пуст.

Вот мой App.js:

import React, {Component} from "react";
import "./App.css";
import axios from "axios";

const TodoForm = ({addTodo}) => {
  // Input tracker
  let input;

  return (
    <div>
      <input
    ref={node => {
      input = node;
    }}
      />
      <button
    onClick={() => {
      addTodo(input.value);
      input.value = "";
    }}
      >
    +
      </button>
    </div>
  );
};

const Todo = ({todo, remove}) => {
  // Each todo
  return <li onClick={remove(todo.id)}>{todo.text}</li>;
};

const TodoList = ({todos, remove}) => {
  // Map through the todos
  const todoNode = todos.map(todo => {
    return <Todo todo={todo} key={todo.id} remove={remove}/>;
  });
  return (
    <div className="list-group" style={{marginTop: "30px"}}>
      {todoNode}
    </div>
  );
};

const Title = () => {
  return (
    <div>
      <h1>Todo App</h1>
    </div>
  );
};

// Container component
window.id = 0;

class App extends Component {
  constructor(props) {
    // Pass props to parent class
    super(props);
    // Set initial state
    this.state = {
      data: []
    };
    this.apiUrl = ""; // my url goes here
    // Make HTTP requests with axios
    axios.get(this.apiUrl).then(res => {
      // Set state with result
      this.setState({data: res.data});
    });
  }

  // addTodo hanlder
  addTodo(val) {
    // Assemble data
    const todo = {text: val, id: window.id++};
    // Update data
    this.state.data.push(todo);
    axios.post(this.apiUrl, todo).then(res => {
      this.state.data.push(res.data);
      this.setState({data: this.state.data});
    });
  }

  render() {
    return (
      <div>
    <Title/>
    <TodoForm addTodo={this.addTodo.bind(this)}/>
    <TodoList
      todos={this.state.data}
      remove={this.handleRemove.bind(this)}
    />
      </div>
    );
  }
}

export default App;

Вот скриншот моего приложения. Список должен отображаться под вводимым текстом.

Я получаю только 1 предупреждение и без ошибок:

Line 86:  Expected to return a value at the end of arrow function  array-callback-return

Я думаю, что это где-то в моей функции addTodo, но я совсем не уверен. Кто-нибудь может помочь? Спасибо.

Answer 1

, как сказал warl0ck, push обновляет ваш массив, но метод рендеринга React не обновляется, когда вы изменяете массив, вам нужно вернуть новый массив, который обнаруживает изменения и, следовательно, рендер называется

Answer 2

В вашем addTodohandler вы используете this.state.data.push в React, это не будет обновлять состояние

addTodo(val) {
    // Assemble data
    const todo = {text: val, id: window.id++};
    axios.post(this.apiUrl, todo).then(res => {
      const newData = {...this.state.data, res.data}
      this.setState({data: newData });
    });