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

V2EX = way to explore

V2EX 是一个关于分享和探索的地方

现在注册

已注册用户请登录

这是一个创建于 840 天前的主题，其中的信息可能已经有所发展或是发生改变。

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>
        )
      }
    }
`

func

组件

React

class

6 条回复 • 2022-08-17 21:09:54 +08:00

Features

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

2022-08-17 16:33:56 +08:00

跑了一遍，我觉得没太大思路上的问题。

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

话说头疼在哪儿啊，是不是某些情况下改了数组里的一个值没有触发重新渲染？

HowardTang

2022-08-17 16:45:37 +08:00

没问题最好是抽出一个 onClick function

Features

2022-08-17 16:51:18 +08:00

@devwolf 开始不熟悉语法，现在熟悉就好了

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

2022-08-17 21:09:54 +08:00 via iPhone

喜欢这种可以试试 redux/toolkit