警告：函数无效，因为 React 子项不显示

Question

When i compile the app i get this warning in the console:

Warning: Functions are not valid as a React child. This may happen if you return a Component instead of from render. Or maybe you meant to call this function rather than return it.

My App.js:

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

class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      toDoList: [],
      activeItem: {
        id: null,
        title: "",
        completed: false,
      },
      editing: false,
    };
    this.fetchTasks = this.fetchTasks.bind(this);
  }

  componentWillMount() {
    this.fetchTasks();
  }

  fetchTasks() {
    console.log("Fetching...");

    fetch("http://127.0.0.1:8000/api/task-list/")
      .then((response) => response.json())
      .then((data) =>
        this.setState({
          toDoList: data,
        })
      );
  }

  render() {
    var tasks = this.state.toDoList;

    return (
      <div className="container">
        <div id="task-container">
          <div id="form-wrapper">
            <form id="form">
              <div className="flex-wrapper">
                <div style={{ flex: 6 }}>
                  <input
                    className="form-control"
                    type="text"
                    name="title"
                    placeholder="Add task"
                  />
                </div>

                <div style={{ flex: 1 }}>
                  <input
                    className="btn btn-warning"
                    id="submit"
                    type="submit"
                    name="Add"
                  />
                </div>
              </div>
            </form>
          </div>
          <div className="list-wrapper">
            {
              (tasks.map = (task, index) => {
                return (
                  <div key="{index}" className="task-wrapper flex-wrapper">
                    <span>{task.title}</span>
                  </div>
                )})
            }
          </div>
        </div>
      </div>
    );
  }
}

export default App;

Basically i'm trying to list the items in the api list but i'm missing something. Anyone help me with it?

Answer 1

(tasks.map = (task, index) => {
                return (
                  <div key="{index}" className="task-wrapper flex-wrapper">
                    <span>{task.title}</span>
                  </div>
                )})

Should be:

(tasks.map(task, index) => {
                return (
                  <div key="{index}" className="task-wrapper flex-wrapper">
                    <span>{task.title}</span>
                  </div>
                )})