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

Question

所以我试图在 ReactJS 中制作一个待办事项列表应用程序，但出现错误：

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

我将所有任务存储在 Todolist 的 state 中，并使用.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;

Answer 1

问题在这里：

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

应该：

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

Answer 2

• 你做得很好，只是在map方法中发生了一个小错误，你没有返回任何东西，所以它警告你没有要渲染的东西，所以解决方案是这样的：

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);
                    return <TodoItem todo = {todo} />
                    })
               
                
            )
    
       
    }
}

export default TodoList;

Answer 3

您应该在 map function 中使用 () 而不是 {}，如下所示：

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

或者如果您想使用这样的大括号，请添加 return 语句：

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