当前 React JS：'state' 未定义 no-undef

Question

我正在学习 ReactJS，但我遇到了这个错误“状态”未定义 no-undef 您对哪里出错的帮助。 我有当前的 React “react”：“^16.8.6”。 我尝试在this.state 中添加而不是我得到： Line 1: 'Component' is defined but never used no-unused-vars Line 8: Do not mutate state directly. Use setState() react/no-direct-mutation-state Line 8: Do not mutate state directly. Use setState() react/no-direct-mutation-state

应用程序.js

import React, { Component } from 'react';
import './App.css';
import Todos from './Components/Todos';



function App() {
  state = {
    todos:[
      {
        id:1,
        title: "Study File Structure",
        completed:false
      },
      {
        id:2,
        title: "Create Component",
        completed:false
      },
      {
        id:3,
        title: "Study State",
        completed:false
      }
    ]
  }

  return ( 
    <div className="App">

      <h1>Hello</h1>
      <Todos/>
    </div>
  );
}

export default App;

Answer 1

将function App() {替换为class App extends Component{ 。 这将使您朝着正确的方向前进，并将返回值包装在渲染方法中，如下所示：

class App extends Component{
  state = {
    todos:[
      {
        id:1,
        title: "Study File Structure",
        completed:false
      },
      {
        id:2,
        title: "Create Component",
        completed:false
      },
      {
        id:3,
        title: "Study State",
        completed:false
      }
    ]
  }

  render(){
    return ( 
      <div className="App">

        <h1>Hello</h1>
        <Todos/>
      </div>
    );
  }
}

export default App;

Answer 2

你可以简单地使用 React 钩子。 用React附加state ，这样你就有React.state 。

import React, { Component } from 'react';
import './App.css';
import Todos from './Components/Todos';



function App() {
  React.state = {
    todos:[
      {
        id:1,
        title: "Study File Structure",
        completed:false
      },
      {
        id:2,
        title: "Create Component",
        completed:false
      },
      {
        id:3,
        title: "Study State",
        completed:false
      }
    ]
  }

  return ( 
    <div className="App">

      <h1>Hello</h1>
      <Todos/>
    </div>
  );
}

export default App;

现在当你需要从状态调用任何东西时，类使用this.state.todos但在你的情况下，使用React.state.todos

如果这有帮助，请告诉我。 :)

Answer 3

这项工作非常适合反应 16

import React from 'react';

import './App.css';

//Components
import Person from './Person/Person'

function App() {
   React.state = {
     persons: [
       {name: 'Max', age: 28},
       {name: 'Manu', age: 23},
       {name: 'Jecinta', age: 22},
     ]
   }


  return (
    <div className="App">
     ...
    </div>
  );
}

export default App;

Answer 4

如果您使用的是 React 16.8 或更高版本，您可能需要使用 React Hook 'useState' 来解决问题。 正如您在第一次创建 React 应用程序时所注意到的，App.js 类以

function App(){
}

与

class App extends Component {
}

你会在旧版本的 React 上看到的。 正如标记为最佳答案的答案所建议的那样，该解决方案应该仍然有效。 这是在 React 上管理状态的唯一方法。 从 react 16.8+ 版本开始，您可以选择使用 react Hook 'useState' 来管理应用程序的状态，这在使用功能组件而不是类时效果更好。 事实上，还有许多其他钩子可以用于不同的目的，其中许多钩子以前缀“use...”开头。

因此，如果您的组织更喜欢您使用基于类的组件，请使用它并继续使用“状态”。 但是，如果您可以控制应用程序，因此您可以使用基于类的组件或基于函数的组件，请使用您喜欢的任何一个。

现在要回答上面的问题，首先导入钩子“useState”，如下所示：

 import React,  { useState } from 'react';

然后而不是使用

state {
      todos:[
     ...
     ]

代码应如下所示：

const [currentState, setNewState] =  useState({
 todos:[
  {
    id:1,
    title: "Study File Structure",
    completed:false
  },
  {
    id:2,
    title: "Create Component",
    completed:false
  },
  {
    id:3,
    title: "Study State",
    completed:false
  }
]

 });
      }

'useState' 返回一个正好包含 2 个元素的数组。 第一个元素是当前状态，第二个元素是允许您更新状态的函数。 例如，如果您想访问第一个元素的标题，它应该如下所示 'currentState.todos[0].title'

如果你想更新标题，你可以使用数组的第二个元素

更多关于 React Hooks 的信息，请点击以下链接： https : //reactjs.org/docs/hooks-intro.html

Answer 5

您应该使用React Class Component或useState hook 。

试试这个：

import React, { useState } from 'react';
import './App.css';
import Todos from './Components/Todos';


function App() {
  const [ todos, setTodos ] = React.useState([
    {
      id:1,
      title: "Study File Structure",
      completed:false
    },
    {
      id:2,
      title: "Create Component",
      completed:false
    },
    {
      id:3,
      title: "Study State",
      completed:false
    }
  ]);

  return ( 
    <div className="App">

      <h1>Hello</h1>
      <Todos/>
    </div>
  );
}

export default App;