React报错TypeError: _this.setState is not a function问题求助

嘿，我一眼就看出问题所在啦！你现在用的是函数式组件（const NewItemForm = props => (...)这种写法），但却在尝试使用类组件专属的this.setState方法——函数组件里根本不存在this上下文，这就是控制台抛出TypeError的核心原因～

下面是具体的修复步骤和完整代码示例：

1. 引入useState钩子 #

函数组件要管理状态，必须先从React中引入useState这个核心钩子：

import React, { useState } from 'react';

2. 声明状态变量与更新函数 #

在组件内部，用useState声明存储输入框文本的状态，以及对应的更新函数：

const NewItemForm = props => {
  // 初始化状态为空字符串，对应输入框的初始内容
  const [itemText, setItemText] = useState('');

3. 修改onChange事件处理逻辑 #

把textarea的onChange事件改成直接调用setItemText，实时同步输入框的内容到状态里：

// 定义输入变化的处理函数
const handleTextChange = (e) => {
  setItemText(e.target.value);
};

// 在TextArea组件中绑定这个处理函数，同时加上value属性实现受控组件
<TextArea 
  placeholder='Name your first item here'
  value={itemText}
  onChange={handleTextChange}
/>

完整修复后的代码 #

import React, { useState } from 'react';
import { Form, TextArea } from 'your-ui-library'; // 替换成你实际使用的UI库

const NewItemForm = props => {
  const [itemText, setItemText] = useState('');

  const handleTextChange = (e) => {
    setItemText(e.target.value);
  };

  return (
    <Form onSubmit={props.send_form}>
      <Form.Group>
        <TextArea 
          placeholder='Name your first item here'
          value={itemText}
          onChange={handleTextChange}
        />
      </Form.Group>
      {/* 可添加提交按钮等其他表单元素 */}
    </Form>
  );
};

export default NewItemForm;

额外小提醒 #

• 函数组件的状态管理完全依赖React Hooks，全程不需要用到this，别再和类组件的写法混淆啦～
• 给TextArea加上value={itemText}后，组件就变成了受控组件，能保证状态和输入框内容完全同步，避免出现输入行为不可控的问题。

内容的提问来源于stack exchange，提问作者user984621