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

2022-08-17 12:50:14 +08:00
 Features

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>
        )
      }
    }
`
1026 次点击
所在节点    问与答
6 条回复
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
喜欢这种可以试试 redux/toolkit

这是一个专为移动设备优化的页面(即为了让你能够在 Google 搜索结果里秒开这个页面),如果你希望参与 V2EX 社区的讨论,你可以继续到 V2EX 上打开本讨论主题的完整版本。

https://www.v2ex.com/t/873442

V2EX 是创意工作者们的社区,是一个分享自己正在做的有趣事物、交流想法,可以遇见新朋友甚至新机会的地方。

V2EX is a community of developers, designers and creative people.

© 2021 V2EX