如何解决 NodeJS 中的这个 no-unused-vars 错误？

Question

我正在使用 MERN 堆栈创建一个 todo 应用程序。我是 MERN 堆栈技术的新手，我需要您的帮助来解决这个错误。我已经为我的 app.js 文件和 todo.js 文件提供了代码。我可以' t 在互联网上的任何地方清楚地找到此错误的解决方案。 使用 npm start 命令运行节点 js 应用程序时出现此错误。

Compiled with warnings.

src\App.js
  Line 4:8:  'Todo' is defined but never used  no-unused-vars

Search for the keywords to learn more about each warning.
To ignore, add // eslint-disable-next-line to the line before.

App.js

import React from 'react';
import logo from './logo.svg';
import './App.css';
import Todo from './components/Todo.js';

function App() {
  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <p>
          Edit <code>src/App.js</code> and save to reload.
        </p>
        <a
          className="App-link"
          href="https://reactjs.org"
          target="_blank"
          rel="noopener noreferrer"
        >
          Learn React
        </a>
      </header>
    </div>
  );
}

export default App;

Todo.js

import React, { Component } from 'react'
import axios from 'axios';

 // eslint-disable-next-line

export class Todo extends Component {
    constructor(props) {
        super(props)
    
        this.state = {
             todos : [],
             item : ""
        }
    }

    changeHandler = (event) => {
        this.setState({item: event.target.value})
    }

    clickHandler = (event) => {
        event.preventDefault()
        console.log(this.state.item)
        axios({
            method: 'post',
            url: 'http://localhost:3000/',
            data: {
              todo: this.state.item,
            }
          });
        this.setState({item:''})
    }

    componentDidMount() {
        axios.get('http://localhost:3000/').then((response) => {
            console.log(response.data.data)
            let data = [];
            console.log(response.data.data.length)
            for(var i =0; i < response.data.data.length; i++){
                data.push(response.data.data[i].todo)
            }
            this.setState({todos: data})
        });
    }
    componentDidUpdate() {
        axios.get('http://localhost:3000/').then((response) => {
            console.log(response.data.data)
            let data = [];
            console.log(response.data.data.length)
            for(var i =0; i < response.data.data.length; i++){
                data.push(response.data.data[i].todo)
            }
            this.setState({todos: data})
        });
    }
  
    render() {
        
        return (
            <div>
                <input type="text" onChange={this.changeHandler}/>
                <button type="submit" onClick={this.clickHandler}>add</button>
                <div>
                    <ul>{this.state.todos.map((todo, index) => <li key={index}>{todo}</li>)}</ul>
                </div>
            </div>
        )
    }
}

export default Todo

Answer 1

您收到该警告是因为即使您在 App.js 文件中导入 Todo 文件，但您没有在任何地方使用它。尝试在 App.js 中使用它或删除导入（以防万一需要它）。那应该可以解决警告。 或者在 App.js 中的 import Todo.. 语句之前添加// eslint-disable-next-line