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>
)
}
}
`
1
Features OP 自己试了一下,这样是可行的,大佬看看有问题吗?
` 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> </> ) } ` |
2
devwolf 2022-08-17 16:33:56 +08:00
跑了一遍,我觉得没太大思路上的问题。
不过 useState 命名方式感觉和我所知道的习惯不太一样, 比如 const [dataSource, setDataSource] = useState(); 这样,命名 set 的时候是把前面 state 的驼峰名首字母大写拼到 set 后面。 话说头疼在哪儿啊,是不是某些情况下改了数组里的一个值没有触发重新渲染? |
3
HowardTang 2022-08-17 16:45:37 +08:00
没问题 最好是抽出一个 onClick function
|
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> ) } ` |
6
Envov 2022-08-17 21:09:54 +08:00 via iPhone
喜欢这种可以试试 redux/toolkit
|