首页 > 解决方案 > 如何显示功能组件列表

问题描述

我正在使用 ReactJS 创建一个基本的 Todo 应用程序,并且我想显示 todos 列表。我制作了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职能中的某个地方,但我完全不确定。任何人都可以帮忙吗?谢谢。

标签: javascriptreactjsreact-component

解决方案


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

推荐阅读