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

V2EX = way to explore

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

For Existing Member Sign In

This topic created in 1350 days ago, the information mentioned may be changed or developed.

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 replies • 2022-08-17 21:09:54 +08:00

Features

Aug 17, 2022

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

`
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

Aug 17, 2022

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

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

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

HowardTang

Aug 17, 2022

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

Features

Aug 17, 2022

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

huaijin

Aug 17, 2022

一样初学，
是不是刷新就报错，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

Aug 17, 2022 via iPhone

喜欢这种可以试试 redux/toolkit