javascript - React 中的待办事项列表应用程序错误：no-unused-expressions

Question

所以我试图在 ReactJS 中创建一个待办事项列表应用程序，但我收到了一个错误：

/src/todoList.js 第 40:21 行：期望一个赋值或函数调用，而是看到一个表达式 no-unused-expressions。

我将所有任务存储在 Todolist 状态并使用.map()返回另一个名为 TodoItem 的组件。我对反应环境还很陌生，自己也无法找出错误。

import React from 'react';
import TodoItem from './components/todoItem';

class TodoList extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            todos: [
                {
                    id: 1,
                    title: 'Take out the trash',
                    completed: false
                },
                {
                    id: 2,
                    title: 'Clean the room',
                    completed: false
                },
                {
                    id: 3,
                    title: 'Wash the dishes',
                    completed: false
                },
            ]
        }
    }

    render() {
       const todos = this.state.todos;
      
       
            return (
               
                   todos.map((todo) => {
                    //console.log(todo);
                    <TodoItem todo = {todo} />
                    })
               
                
            )
    
       
    }
}

export default TodoList;

TodoItem组件。它是 Todo 列表中每个项目的单独组件。

import React from 'react';

class TodoItem extends React.Component {
    
    render() {
        console.log(this.props);
        return (
            <h3>{this.props.todo.title}</h3>
        )
    }
}

export default TodoItem;

标签： javascriptreactjsreact-redux

Answer 1

问题在这里：

return (
               
                   todos.map((todo) => {
                    //console.log(todo);
                    <TodoItem todo = {todo} />
                    })

应该：

return (<>{todos.map((todo) => <TodoItem todo = {todo} />)}</>)