React开发实用指南：状态管理、CSS模块与事件处理

定义字段

const [data,setData] = useState([])/**/

CSS引入注意

//css文件命名：'./index.module.css'
import style from './index.module.css'

<div className={style.样式名}></div>

react点击事件

function ClickableComponent() {
  const 事件名 = () => {
    console.log('Button clicked!');
  };
  return (
    <button onClick={事件名}>Click me</button>
  );
}

React接口（src/services/XXX.js）

//XXX.js
import _ from '../untils/request'
//请求接口
export function 接口方法名(id,name) {
    return _.post(`接口路径?id=${id}&name=${name}`)
}

//页面中（jsx）
import { 接口方法名 } from '../../services/XXX';
import React, { useState, useEffect } from 'react';


	const [list, setList] = useState([]);

  useEffect(() => {
    getUsers().then(response => {
      if (response.status === 200) {
        console.log('成功');
        setList(response.data);
      } else {
        console.error('失败');
      }
    }).catch(error => {
      console.error(error);
    });
  }, []);