TodoList.map((item,index)=>{
return <Todo key=index total=TodoList.length>
})
现状:子组件 Todo 获取到的 total 值 分别是 1,2,3.....
想要获得的结果:每当 List 更新时,所有子组件的 total 也都更新(所有子组建的 total 项一致,并且和 TodoList.length 相同)。
在 google 用英文搜索好些结果,但因为英文描述问题,总是找不到确切的答案。 :) thanks in advance
const [todoList,setTodoList] = useState([])
const clickHandler=()=>{
setTodoList([...todoList,'new todo!'])
}
return (
<View>
<Button onClick={()=>clickHandler()}>click to add new Todo.</Button>
{todoList.map((item,index)=>{
return <View><Todo content={item} size={todoList.length}></Todo></View>
})}
</View>
)
内容:new todo TodoList尺寸:1
内容:new todo TodoList尺寸:2
内容:new todo TodoList尺寸:3
内容:new todo TodoList尺寸:4
内容:new todo TodoList尺寸:5
而期望得到的结果是
内容:new todo TodoList尺寸:5
内容:new todo TodoList尺寸:5
内容:new todo TodoList尺寸:5
内容:new todo TodoList尺寸:5
内容:new todo TodoList尺寸:5
todo 组件的代码
function Todo(props) {
const [content, setContent] = useState()
const [size, setSize] = useState()
useEffect(()=>{
setContent(props.content)
setSize(props.size)
},[content,size])
return (
<View>内容:{content} TodoList尺寸:{size}</View>
)
}
1
happyeveryday 2022-07-26 15:59:03 +08:00
不就是 react 最基础的如何更新 state 然后 rerender 嘛...
|
2
codehz 2022-07-26 16:05:18 +08:00
(你不会直接原地 push 到数组的吧
|
3
hi20151215x OP @happyeveryday 每次新添加 todo 到 list 都能够 re-render 。 但就是结果不是想要的
|
4
hi20151215x OP @codehz 嗯。。是的。难道???问题在这里?
|
5
Leviathann 2022-07-26 16:09:11 +08:00
key 不要设为 index
|
6
ryncv 2022-07-26 16:16:37 +08:00
setState({TodoList: [...TodoList]})
|
7
wenzichel 2022-07-26 16:34:17 +08:00
无论是类组件还是函数组件,不要直接操作 TodoList 。
在类组件中,是使用 this.setState()来操作的;在函数组件里,是用 const [TodoList, setTodoList] = useState()这个 hook 中的第 2 个参数 setTodoList()来操作的。 |
8
yaphets666 2022-07-26 16:53:22 +08:00
vue 里直接 push 就行,react 不是这个套路
|
9
pengtdyd 2022-07-26 17:07:03 +08:00
key 不要设为 index ,key 会被动态赋值,导致不可预知的 bug
|
10
Alander 2022-07-26 17:16:39 +08:00
乍一看 append 的代码我竟看不出来这段代码是否真的会如作者所说的 1 ,2 ,3 ,4 ,5
应该全是 5 才对 |
11
fengfuliu 2022-07-26 17:17:50 +08:00
setTodoList([...todoList,'new todo!'])改成 setTodoList(prev=>([...prev,'new todo!']))
|
12
hi20151215x OP @Alander 如果在当前组件 全是 5 ,但是传递到子组件后 就不是了。
|
13
zhangdroid 2022-07-26 17:23:37 +08:00
append 的代码应该是可以得到预期的结果的, 有问题的话有可能是 Todo 这个组件有问题, 比如用了 memo/shouldComponentUpdate
|
14
Alander 2022-07-26 17:30:51 +08:00
@hi20151215x 如 13 楼所说,希望能贴出来 Todo 组件的代码才能更好的知道为什么。至于纠正你如何去 setState 的可以忽略
|
15
Alander 2022-07-26 17:32:04 +08:00
@hi20151215x 确实是不应该直接 push ,但是你 append 后的代码更新方式已经是正确更新方式了,所以直接看一下 Todo 组件的代码应该可以发现端倪
|
16
churchill 2022-07-26 17:36:26 +08:00
你是不是在🎣啊
|
17
hi20151215x OP @churchill 都快抓耳挠腮了。
|
18
hi20151215x OP @Alander 代码已更新 希望得到您回复:)
|
19
codehz 2022-07-26 17:47:39 +08:00
咦 ,
const [content, setContent] = useState() const [size, setSize] = useState() useEffect(()=>{ setContent(props.content) setSize(props.size) },[content,size]) 这是在干啥 用内部的 state 作为 effect 的 deps 参数吗,那肯定不会更新啊(另外推荐开 eslint 直接在 jsx 里用 props 上的属性就可以了 |
20
westoy 2022-07-26 17:55:07 +08:00
Todo 加个 key={`item-${index}-${todoList.length}`}
|
21
freeman12 2022-07-26 17:56:11 +08:00
子组件直接 props.size 用就好了,干嘛存到自己的 state
|
22
freeman12 2022-07-26 17:56:47 +08:00
这样<View>内容:{content} TodoList 尺寸:{props.size}</View>
|
23
silk 2022-07-26 17:57:41 +08:00
,[content,size] 去掉观察目标 有变化就更新 或者按照#19
|
24
yunyuyuan 2022-07-26 18:19:25 +08:00
你 todo 组件 useEffect 的依赖填错了,应该是 props.content 和 props.size ,而且这样写是脱裤子放屁。。。
|
25
hi20151215x OP |
26
shakukansp 2022-07-26 18:29:47 +08:00
props 变动可以触发组件重渲染,所以
function Todo(props) { return ( <View>内容:{props.content} TodoList 尺寸:{props.size}</View> ) } |
27
Envov 2022-07-27 10:19:45 +08:00
useEffect(() => {
setContent(props.content); setSize(props.size); }, [content, size]); 这个依赖项写错了,导致结果是 useEffect 内的函数不会执行 |