React出现Functions are not valid as a React child警告且列表不显示

• 核心错误：渲染列表时错误使用了赋值符号=调用数组map方法，你写的tasks.map = (task, index) => {...}本质是给数组的map属性赋值函数，而非执行map遍历返回JSX节点，React渲染时拿到函数类型的值，就触发了你看到的警告。
• 语法小问题：列表项key属性加了多余引号，key="{index}"会被解析为固定字符串"{index}"，无法读取index变量的值，会触发列表key不唯一的警告。
• 优化点：componentWillMount是React已废弃的生命周期钩子，接口请求逻辑不建议放在这里执行。

将render方法中list-wrapper区块的代码替换为如下内容：

<div className="list-wrapper">
  {/* 先判断数组存在再调用map，避免接口异常时报错 */}
  {tasks && tasks.map((task, index) => {
    return (
      <div key={index} className="task-wrapper flex-wrapper">
        <span>{task.title}</span>
      </div>
    )
  })}
</div>

同时将废弃的componentWillMount生命周期替换为componentDidMount：

// 替换原来的componentWillMount方法
componentDidMount() {
  this.fetchTasks();
}

修改完成后重新编译即可正常渲染任务列表。

内容的提问来源于stack exchange，提问作者morningPerson