如何显示功能组件列表答案

【问题标题】：How to display a list of functional components如何显示功能组件列表
【发布时间】：2019-01-17 04:30:48
【问题描述】：

我正在使用 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 函数中，但我完全不确定。任何人都可以帮忙吗？谢谢。

【问题讨论】：

你发现任何错误？
@sayalok 我没有错误。虽然有 1 个警告。我会更新问题。
你保持你的数据状态你可以在你的应用程序上控制台吗？我认为你应该通过道具传递这些数据。
您能否创建演示来重现您的问题？

标签： javascript reactjs react-component

【解决方案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 });
    });

【讨论】：

【解决方案2】：

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

【讨论】：