Question

我正在学习ReactJS，遇到此错误未定义“状态” 您在哪里出问题的协助。我有当前的React“ react”：“ ^ 16.8.6”。我尝试添加 this.state ，但我得到了： addPostFrameCallback class _HomePageState extends State<HomePage> with WidgetsBindingObserver { ScrollController _scrollController; @override void initState() { super.initState(); _scrollController = ScrollController(); SchedulerBinding.instance.addPostFrameCallback((duration) { // prints true if scrollable else false print("isScrollable = ${_scrollController.position.maxScrollExtent != 0}"); }); } Widget build() { return ListView.builder( controller: _scrollController, ... } }

App.js

Line 1:  'Component' is defined but never used         no-unused-vars

Answer 1

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

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

这非常适合反应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 3

您可以简单地使用React钩子。在[Activity(Label = "@string/app_name", Theme = "@style/AppTheme", MainLauncher = true)] public class MainActivity : AppCompatActivity { public static RecyclerView mRecyclerView; public static RecyclerView.LayoutManager mLayoutManager; public RecyclerView.ViewHolder holder; public static BottomNavigationView bottomnavigationview1; public static RecyclerView.Adapter mAdapter; public static List<Email> mEmails; protected override void OnCreate(Bundle bundle) { base.OnCreate(bundle); Xamarin.Essentials.Platform.Init(this, bundle); // Set our view from the "main" layout resource SetContentView(Resource.Layout.activity_main); mRecyclerView = FindViewById<RecyclerView>(Resource.Id.recyclerViwer); mRecyclerView.AddItemDecoration(new DividerItemDecoration(mRecyclerView.Context, DividerItemDecoration.Vertical)); mRecyclerView.HasFixedSize = true; SetupList(); //Create our layout Manager mLayoutManager = new LinearLayoutManager(this); mRecyclerView.SetLayoutManager(mLayoutManager); RecyclerAdapter mAdapter = new RecyclerAdapter(mEmails, this); mRecyclerView.SetAdapter(mAdapter); var swipeHandler = new SwipeToDeleteCallback(0, ItemTouchHelper.Left, this, mAdapter); var itemTouchHelper = new ItemTouchHelper(swipeHandler); itemTouchHelper.AttachToRecyclerView(mRecyclerView); } private void SetupList() { for (int i = 1; i <= 2; i++) { mEmails = new List<Email>(); mEmails.Add(new Email() { Name = "tom", Subject = "Wanna Hang Out?", Message = "I ' ll be around tomorrow!!" }); mEmails.Add(new Email() { Name = "tom", Subject = "Wanna Hang Out?", Message = "I ' ll be around tomorrow!!" }); mEmails.Add(new Email() { Name = "tom", Subject = "Wanna Hang Out?", Message = "I ' ll be around tomorrow!!" }); mEmails.Add(new Email() { Name = "tom", Subject = "Wanna Hang Out?", Message = "I ' ll be around tomorrow!!" }); mEmails.Add(new Email() { Name = "tom", Subject = "Wanna Hang Out?", Message = "I ' ll be around tomorrow!!" }); mEmails.Add(new Email() { Name = "tom", Subject = "Wanna Hang Out?", Message = "I ' ll be around tomorrow!!" }); mEmails.Add(new Email() { Name = "tom", Subject = "Wanna Hang Out?", Message = "I ' ll be around tomorrow!!" }); mEmails.Add(new Email() { Name = "tom", Subject = "Wanna Hang Out?", Message = "I ' ll be around tomorrow!!" }); mEmails.Add(new Email() { Name = "tom", Subject = "Wanna Hang Out?", Message = "I ' ll be around tomorrow!!" }); mEmails.Add(new Email() { Name = "tom", Subject = "Wanna Hang Out?", Message = "I ' ll be around tomorrow!!" }); mEmails.Add(new Email() { Name = "tom", Subject = "Wanna Hang Out?", Message = "I ' ll be around tomorrow!!" }); mEmails.Add(new Email() { Name = "tom", Subject = "Wanna Hang Out?", Message = "I ' ll be around tomorrow!!" }); mEmails.Add(new Email() { Name = "tom", Subject = "Wanna Hang Out?", Message = "I ' ll be around tomorrow!!" }); mEmails.Add(new Email() { Name = "tom", Subject = "Wanna Hang Out?", Message = "I ' ll be around tomorrow!!" }); } }后面加上state，这样就得到了React。

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

让我知道是否有帮助。：）

Answer 4

您应该使用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;

Answer 5

如果您使用的是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

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

5 个答案: