React Native类组件转函数组件时遇缺少分号错误及无render结构实现方案咨询

嗨，我来帮你搞定这个类组件转函数组件的问题，顺便解决你遇到的语法错误～

首先，你遇到的「missing semicolon」错误，大概率是因为你在函数组件里错误保留了类组件的constructor语法——函数组件根本不需要这个哦！下面是完整的转换后的代码，我还优化了状态更新的逻辑，让它更符合函数组件的写法：

import React, { useState } from 'react';
import { View, TouchableOpacity, Text, StyleSheet } from 'react-native';

const App = () => {
  // 用useState初始化状态，替代类组件的constructor和this.state
  const [categes, setCateges] = useState([
    { cat_id: '1', cat_name: 'abc', backgroundcolor: '#ED2525' },
    { cat_id: '2', cat_name: 'xyz', backgroundcolor: '#ED2525' },
    { cat_id: '3', cat_name: 'pqr', backgroundcolor: '#ED2525' },
    { cat_id: '4', cat_name: 'uvw', backgroundcolor: '#ED2525' },
    { cat_id: '5', cat_name: 'hij', backgroundcolor: '#ED2525' },
  ]);
  // 原state里的change字段暂时没用到，保留的话也用useState声明
  const [change, setChange] = useState(false);

  // 重构背景色切换函数，去掉this，用useState的setter更新状态
  const changeBackground = (item) => {
    // 用map遍历数组，直接生成新的数组（避免直接修改原状态）
    const updatedCateges = categes.map(cat => {
      return cat.cat_id === item.cat_id
        ? { ...cat, backgroundcolor: '#0000FF' }
        : { ...cat, backgroundcolor: '#ED2525' };
    });
    // 一次性更新状态，避免原代码里循环多次setState的性能问题
    setCateges(updatedCateges);
  };

  // 函数组件不需要render方法，直接返回JSX即可
  return (
    <View style={styles.container}>
      {categes.map((item, key) => (
        <TouchableOpacity
          key={key} // 不要忘记给map的元素加key
          style={{
            width: 200,
            height: 60,
            alignItems: 'center',
            justifyContent: 'center',
            margin: 10,
            backgroundColor: item.backgroundcolor,
          }}
          onPress={() => changeBackground(item)}>
          <Text style={{ color: '#FFFFFF' }}>
            {item.cat_name.toUpperCase()}
          </Text>
        </TouchableOpacity>
      ))}
    </View>
  );
};

// 假设原代码的styles在这里，保留即可
const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
  },
});

export default App;

下面是几个关键的转换要点，帮你理解为什么这么改：

• 去掉constructor和this.state：函数组件用useState钩子来声明和管理状态，每个状态变量对应一个setter函数，直接在函数顶部声明就行，不需要类的构造函数语法，这也是解决你「缺少分号」错误的核心——你之前可能在函数组件里硬塞了类的constructor，导致语法不兼容。
• 去掉render方法：函数组件本身就是一个返回JSX的函数，不需要像类组件那样写单独的render()方法，直接在函数里return JSX结构就可以了。
• 重构类方法为普通函数：原组件的changeBackground是类的实例方法，在函数组件里直接写成普通函数即可，不需要用this调用，直接使用声明好的状态变量和setter函数。
• 优化状态更新逻辑：原代码里在循环中多次调用setState，这会触发多次重渲染，我改成了用map生成新数组后一次性更新状态，既符合React的不可变状态原则，又提升了性能。

如果还有其他问题，随时问哦～

备注：内容来源于stack exchange，提问作者muhammetseymen