为什么我不能通过地图功能显示我的项目？答案

【问题标题】：Why can't i display my items by map function?为什么我不能通过地图功能显示我的项目？
【发布时间】：2021-09-24 07:49:39
【问题描述】：

我想显示我的待办事项列表，但它遇到错误“src\components\TodoList.js 第 11:30 行：Array.prototype.map() 期望箭头函数 array-callback-return 的返回值"。我的代码有什么问题吗，请帮助我！非常感谢！

这是我的 TodoList.js：

import React from "react";

function TodoList({ todos, setTodos }) {
  return (
    <div>
      {" "}
      {todos.map((todo) => {
        <li key={todo.id}>
          <input
            type="text"
            value={todo.title}
            onChange={(event) => event.preventDefault()}
          />{" "}
        </li>;
      })}{" "}
    </div>
  );
}

export default TodoList;

这是我的 Form.js：

import React from "react";
import { v4 as uuidv4 } from "uuid";

function Form({ input, setInput, todos, setTodos }) {
  const onInputChange = (event) => setInput(event.target.value);
  const onFormSubmit = (event) => {
    event.preventDefault();
    setTodos([
      ...todos,
      {
        id: uuidv4(),
        title: input,
        completed: false,
      },
    ]);
    setInput("");
  };
  return (
    <form onSubmit={onFormSubmit}>
      <div>
        <input
          type="text"
          placeholder="add a todo..."
          value={input}
          required
          onChange={onInputChange}
        />{" "}
        <button className="button-add" type="submit">
          {" "}
          add{" "}
        </button>{" "}
      </div>{" "}
    </form>
  );
}

export default Form;

这是我的 App.js：

import React, { useState } from "react";
import "./App.css";
import Header from "./components/Header";
import Form from "./components/Form";
import TodoList from "./components/TodoList";

function App() {
  const [input, setInput] = useState("");
  const [todos, setTodos] = useState([]);
  return (
    <div>
      <div className="container">
        <div className="app-wrapper">
          <div>
            <Header />
            <Form
              input={input}
              setInput={setInput}
              todos={todos}
              setTodos={setTodos}
            />{" "}
            <TodoList todos={todos} setTodos={setTodos} />{" "}
          </div>{" "}
        </div>{" "}
      </div>{" "}
    </div>
  );
}
export default App;

【问题讨论】：

你不会从.map()返回任何东西。
只需删除<li> 周围的大括号以使其隐式返回，如果使用，您应该明确return，如答案中所述

标签： arrays reactjs callback

【解决方案1】：

普通函数体，还是需要在.map回调中返回JSX。

function TodoList({ todos, setTodos }) {
  return (
    <div>
      {todos.map((todo) => {
        return (
          <li key={todo.id}>
            <input
              type="text"
              value={todo.title}
              onChange={(event) => event.preventDefault()}
            />
          </li>
        );
      })}
    </div>
  );
}

或者通过删除函数体使用隐式箭头函数返回。

function TodoList({ todos, setTodos }) {
  return (
    <div>
      {todos.map((todo) => (
        <li key={todo.id}>
          <input
            type="text"
            value={todo.title}
            onChange={(event) => event.preventDefault()}
          />
        </li>
      ))}
    </div>
  );
}

【讨论】：

画得很清楚??

【解决方案2】：

      <div>
       {" "}
       {todos.map((todo) => {
         return (
            <li key={todo.id}>
           <input
             type="text"
             value={todo.title}
             onChange={(event) =>      event.preventDefault()}
           />{" "}
         </li>);
       })}{" "}
     </div>

或者这个

<div>
        {" "}
        {todos.map((todo) => (
            <li key={todo.id}>
                <input
                    type="text"
                    value={todo.title}
                    onChange={(event) =>      event.preventDefault()}
                />{" "}
            </li>
        ))}
        {" "}
    </div>

【讨论】：