在反应中设置状态但不断收到错误“状态”被分配了一个值但从未使用过 no-unused-vars答案

【问题标题】：Setting a state in react but keep getting an error 'state' is assigned a value but never used no-unused-vars在反应中设置状态但不断收到错误“状态”被分配了一个值但从未使用过 no-unused-vars
【发布时间】：2019-11-05 05:49:28
【问题描述】：

我正在学习 react.js 状态，每次运行此代码时都会收到错误“状态”被分配了一个值，但从未使用过 no-unused-vars

我尝试制作类APP而不是函数APP

import React from 'react';
import './App.css';
import Person from './Person/Person'


function App() {
  const state = {
   persons: [
  { name :'max', age : 28},
  { name:'manu', age : 29},
  { name:'adel', age : 30}
]
}
  return (
    <div className="App">
      <h1> Hello world</h1>
      <button> Switch name </button>
      <Person name= {this.state.persons[0].name} age= {this.state.persons[0].age} ></Person>
      <Person name= {this.state.persons[1].name}  age= {this.state.persons[1].age} >hello eslam </Person>
      <Person name= {this.state.persons[2].name}  age= {this.state.persons[2].age} ></Person>

    </div>
  );
}

export default App;

【问题讨论】：

标签： reactjs react-hooks

【解决方案1】：

原因是这是一个函数。您需要使用state 而不是this.state 来使用它。

【讨论】：

【解决方案2】：

您没有使用变量state，而是使用this.state。

此外，如果您想在函数中使用state 或react，您可能需要使用hooks。

以下链接可以帮助您开始：

状态和生命周期：https://reactjs.org/docs/state-and-lifecycle.html

钩子状态：https://reactjs.org/docs/hooks-state.html

【讨论】：

【解决方案3】：

如果您在功能组件或标签render(){...} 中使用变量和函数，则不需要使用this。

import React from 'react';
import './App.css';
import Person from './Person/Person';

function App() {
  const state = {
    persons: [
      { name: 'max', age: 28 },
      { name: 'manu', age: 29 },
      { name: 'adel', age: 30 }
    ]
  };

  return (
    <div className='App'>
      <h1> Hello world</h1>
      <button> Switch name </button>
      <Person
        name={state.persons[0].name}
        age={state.persons[0].age}
      ></Person>
      <Person name={state.persons[1].name} age={state.persons[1].age}>
        hello eslam{' '}
      </Person>
      <Person
        name={state.persons[2].name}
        age={state.persons[2].age}
      ></Person>
    </div>
  );
}

export default App;

【讨论】：

【解决方案4】：

你应该使用这样的状态

class Example extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      count: 0
    };
  }

  render() {
    return (
      <div>
        <p>You clicked {this.state.count} times</p>
        <button onClick={() => this.setState({ count: this.state.count + 1 })}>
          Click me
        </button>
      </div>
    );
  }
}

这是在 react 中使用状态的基础，尽管在 react 中还有另一种使用状态的方法，即 Hooks，这是一个等效的示例：

import React, { useState } from 'react';

function Example() {
  // Declare a new state variable, which we'll call "count"
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>
        Click me
      </button>
    </div>
  );
}

更多信息见：https://reactjs.org/docs/hooks-state.html

【讨论】：