V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
V2EX 提问指南
Features
V2EX  ›  问与答

初学 React,请教下 React 中 Func 组件处理列表的事件问题

  •  
  •   Features · 2022-08-17 12:50:14 +08:00 · 849 次点击
    这是一个创建于 589 天前的主题,其中的信息可能已经有所发展或是发生改变。

    React 中有 Class 组件和 Func 组件
    我看官网推荐使用 Func 组件
    但是在 Func 组件中,处理列表让我感觉非常头疼

    例如,在 Class 组件的列表里,常见的列表操作:
    如何在 Func 组件中实现 Class 中组件这样常见的操作?

     `
        import React, { Component } from 'react'
        import {fetchList} from 'Api'
        
        export default class Loop extends Component {
            //1.初始化数据
            state = {
                list:fetchList()
            }
            
            //2.点击事件修改数据
            setItem(item){
                item.name = "修改后的名字"
                item.active = !item.active
                
                this.setState({
                  list:this.state.list
                })
            }
        
          render() {
            return (
              <div>
                <ul>
                    {this.state.list.map((item,index)=>{
                        return <li key={index} onClick={()=>{
                            this.setItem(item);
                        }}>{item.id}:{item.name}</li>
                    })}
                </ul>
              </div>
            )
          }
        }
    `
    
    6 条回复    2022-08-17 21:09:54 +08:00
    Features
        1
    Features  
    OP
       2022-08-17 13:24:39 +08:00
    自己试了一下,这样是可行的,大佬看看有问题吗?

    `
    import React from 'react'
    import {useState,useEffect} from 'react'
    import {fetchList} from 'react'

    export default function FuncLoop() {
    const [data,setItem] = useState([]);

    useEffect(()=>{
    setItem(fetchList());
    },[]);

    return (
    <>
    <ul>
    {data.map((item, index) => (
    <li key={item.id} onClick={(item)=>{
    let copy = [...data];
    copy[index].name = '修改后的名字';
    setItem(copy)
    }}>{item.name}</li>
    ))}
    </ul>
    </>
    )
    }

    `
    devwolf
        2
    devwolf  
       2022-08-17 16:33:56 +08:00
    跑了一遍,我觉得没太大思路上的问题。

    不过 useState 命名方式感觉和我所知道的习惯不太一样, 比如 const [dataSource, setDataSource] = useState(); 这样,命名 set 的时候是把前面 state 的驼峰名首字母大写拼到 set 后面。

    话说头疼在哪儿啊,是不是某些情况下改了数组里的一个值没有触发重新渲染?
    HowardTang
        3
    HowardTang  
       2022-08-17 16:45:37 +08:00
    没问题 最好是抽出一个 onClick function
    Features
        4
    Features  
    OP
       2022-08-17 16:51:18 +08:00
    @devwolf 开始不熟悉语法,现在熟悉就好了
    huaijin
        5
    huaijin  
       2022-08-17 16:51:23 +08:00
    一样初学,
    是不是刷新就报错,data.map xxxxx 。
    少了一个判断 if (!item) return null 。
    `
    import React, { useState, useEffect } from 'react'

    export default function FuncLoop() {
    const [item, setItem] = useState(null);
    useEffect(() => {
    let data = [{ id: 1, name: "张三" }, { id: 21, name: "李四" }, { id: 31, name: "王五" }];
    setItem(data);
    }, []);
    console.log(item);
    if (!item) return null
    return (
    <div>
    <ul>
    {item.map((value, index) => (
    <li key={value.id} onClick={(value) => {
    let copy = [...item];
    copy[index].name = '修改后的名字';
    setItem(copy)
    }}>{value.name}</li>
    ))}
    </ul>
    </div>
    )
    }
    `
    Envov
        6
    Envov  
       2022-08-17 21:09:54 +08:00 via iPhone
    喜欢这种可以试试 redux/toolkit
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   我们的愿景   ·   实用小工具   ·   3163 人在线   最高记录 6543   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 27ms · UTC 12:21 · PVG 20:21 · LAX 05:21 · JFK 08:21
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.