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

V2EX = way to explore

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

已注册用户请登录

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

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 年 8 月 17 日

自己试了一下，这样是可行的，大佬看看有问题吗？

`
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 年 8 月 17 日

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

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

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

HowardTang

2022 年 8 月 17 日

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

Features

2022 年 8 月 17 日

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

huaijin

2022 年 8 月 17 日

一样初学，
是不是刷新就报错，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 年 8 月 17 日 via iPhone

喜欢这种可以试试 redux/toolkit