Question

我正在用ReactJS创建一个基本的Todo应用，我想显示待办事项列表。我将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的render方法不会更新，您需要返回一个新的Array来检测更改，因此渲染称为

如何显示功能组件列表

2 个答案: