如何显示功能组件列表

Question

我正在使用 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

在你的 addTodohandler 中，你在 React 中使用 this.state.data.push 这不会更新状态

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 });
    });

Answer 2

正如 warl0ck 所说，推送确实会更新您的数组，但是当您改变数组时 React 的渲染方法不会更新，您需要 return 一个检测变化并因此调用渲染的新数组

如何显示功能组件列表

How to display a list of functional components

javascript

reactjs

react-component