Question

我无法使用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

Answer 1

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

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

Answer 2

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

Answer 3

应该这样使用：

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函数中设置所需的任何值。

Answer 4

使用反应挂钩和功能组件时，您可以（暂时）丢弃有关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', }), ); await queryRunner.createForeignKey( 'telephones', new TableForeignKey({ name: 'TelephoneContact', columnNames: ['owner_id'], referencedColumnNames: ['id'], referencedTableName: 'contacts', onDelete: 'CASCADE', onUpdate: 'CASCADE', }), ); } 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")

Answer 5

您的代码中有两个问题。

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

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

并使用：

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

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

5 个答案: