反应-TypeError：无法读取未定义的属性“ setState”箭头函数

问题描述

我无法使用setState。我的代码如下所示：

const FormComp = () => {
  const [reader,setReader] = React.useState(0);
//rest of the code
};

const Ques1 = () => {
  return (
    <>
    <button onClick={() => {
                this.setState({ reader: "1" });
              }}>Click</button>
    </>
  )
};

这只是代码的简短版本。我在这方面面临问题。请有人帮我。 此代码在同一文件中。 更新： 已尝试setReader，但抛出错误，提示未定义setReader

解决方法

在使用React.useState时，您不会执行this.setState，在此示例中，您只会这样做：

 <button onClick={() => {
     setReader("1");
 }}>Click</button>

,

由于您正在使用useState挂钩，因此应调用setReader而不是this.setState。

,

应该这样使用：

import React from 'react';

function App() {
  const [reader,setReader] = React.useState(0);
  const FormComp = () => {
  //rest of the code
    return <div>Clicked {reader} times</div>
  };
  
  const Ques1 = () => {
    return (
      <button onClick={() => setReader(reader+1)}>Increase</button>
    )
  };
  return (
    <div className="App">
      <FormComp />
      <Ques1 />
    </div>
  );
}

export default App;

您可以在setReader函数中设置所需的任何值。

,

使用反应挂钩和功能组件时，您可以（暂时）丢弃有关this.setState的概念

相反，将import { MigrationInterface,QueryRunner,TableColumn,TableForeignKey,} from 'typeorm'; export default class AddOwnerIdToTelephones1597250413640 implements MigrationInterface { public async up(queryRunner: QueryRunner): Promise<void> { await queryRunner.addColumn( 'telephones',new TableColumn({ name: 'owner_id',type: 'uuid',isNullable: false,}),); await queryRunner.createForeignKey( 'telephones',new TableForeignKey({ name: 'TelephoneClient',columnNames: ['owner_id'],referencedColumnNames: ['id'],referencedTableName: 'clients',onDelete: 'CASCADE',onUpdate: 'CASCADE',new TableForeignKey({ name: 'TelephoneContact',referencedTableName: 'contacts',); } public async down(queryRunner: QueryRunner): Promise<void> { await queryRunner.dropForeignKey('telephones','TelephoneContact'); await queryRunner.dropForeignKey('telephones','TelephoneClient'); await queryRunner.dropColumn('telephones','owner_id'); } } 用于import { PrimaryGeneratedColumn,Column,Entity,ManyToOne,JoinColumn,} from 'typeorm'; import Client from './Client'; import Contact from './Contact'; @Entity('telephones') class Telephone { @PrimaryGeneratedColumn('uuid') id: string; @Column() telephone_number: string; @ManyToOne(() => Client,client => client.id) @ManyToOne(() => Contact,contact => contact.id) @JoinColumn({ name: 'owner_id' }) owner_id: string; } export default Telephone; useState Hook。您应该使用this.setState({ reader: "1" })或 const [reader,setReader] = React.useState(0);（根据您的旧“ setReader(1)”）

按钮onClick类似于：

setReader("1")

,

您的代码中有两个问题。

1. 您使用setState时同时使用了反应钩子useState
2. useState在一个组件中使用，试图在另一个组件上访问

因此，确定您需要它的位置，还是要将它作为prop和/或lift state up传递？

并使用：

onClick={() => setReader(1)}