React之useEffect处理多个useState

短命女 2023-09-29 10:41 12阅读 0赞

### Background ###

最近项目需要用到`React.js`的知识，做个web tagging的功能，需要针对按钮和一些变量的变化进行触发，于是需要用到`useEffect处理多个useState`的解决方法。

假设：

*  有type和status两个变量，
 *  如果同时触发，如果单独触发，执行不同的功能

`useState`定义

> const \[type, setType\] = useState(‘支付宝’);  
> const \[status, setStatus\] = useState(‘全部’);

`useEffec`t处理

> //只要状态或者支付方式变化就触发  
> useEffect(() => \{  
> console.log(‘useEffect:all’)  
> console.log(`获取最新列表，类型：${type}, 状态：${status}, ${Date.now()}`);  
> \}, \[type,status\]);  
> //处理支付方式变化  
> useEffect(() => \{  
> console.log(‘useEffect:type’)  
> \}, \[type\]);  
> //处理状态变化  
> useEffect(() => \{  
> console.log(‘useEffect:status’)  
> \}, \[status\]);

### ![在这里插入图片描述][watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBATW9zaG936YOR6ZS0_size_20_color_FFFFFF_t_70_g_se_x_16]   Open Source Project ###

[https://github.com/moshowgame/react-study/tree/master/multi\_states\_use\_effect][https_github.com_moshowgame_react-study_tree_master_multi_states_use_effect]

### Show Me The Code ###

import {
         useMemo } from 'react';
    import {
         useEffect, useState } from 'react';
    
    export default function App() {
        
        const types = useMemo(() => {
        
            return ['支付宝', '微信', '云闪付', '羊城通'];
        }, []);
        const statusList = useMemo(() => {
        
            return ['全部', '待支付', '已支付', '发货中', '完成'];
        }, []);
        const [type, setType] = useState('支付宝');
        const [status, setStatus] = useState('全部');
        //只要状态或者支付方式变化就触发
        useEffect(() => {
        
            console.log('useEffect:all')
            console.log(`获取最新列表，类型：${
          type}, 状态：${
          status},  ${
          Date.now()}`);
        }, [type,status]);
        //处理支付方式变化
        useEffect(() => {
        
            console.log('useEffect:type')
        }, [type]);
        //处理状态变化
        useEffect(() => {
        
            console.log('useEffect:status')
        }, [status]);
    
        return (
            <div>
                <div>
                    <h2>zhengkai.blog.csdn.net</h2>
                </div>
                <div>
                    {
        types.map((val) => {
        
                        return (
                            <button style={
        {
         color: val === type ? 'red' : 'black' }} key={
        val} onClick={
        () => setType(val)}>
                                {
        val}
                            </button>
                        );
                    })}
                </div>
                <div>
                    {
        statusList.map((val) => {
        
                        return (
                            <button style={
        {
         color: val === status ? 'red' : 'black' }} key={
        val} onClick={
        () => setStatus(val)}>
                                {
        val}
                            </button>
                        );
                    })}
                </div>
            </div>
        );
    }

[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBATW9zaG936YOR6ZS0_size_20_color_FFFFFF_t_70_g_se_x_16]: https://img-blog.csdnimg.cn/4f27be8d5db74f6195a2949a3c53802f.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBATW9zaG936YOR6ZS0,size_20,color_FFFFFF,t_70,g_se,x_16
[https_github.com_moshowgame_react-study_tree_master_multi_states_use_effect]: https://github.com/moshowgame/react-study/tree/master/multi_states_use_effect