求助一下关于 react 更新 list 的一个疑问。

[hi20151215x]

	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

[happyeveryday]

不就是 react 最基础的如何更新 state 然后 rerender 嘛...

[codehz]

(你不会直接原地 push 到数组的吧

[hi20151215x]

@happyeveryday 每次新添加 todo 到 list 都能够 re-render 。 但就是结果不是想要的

[hi20151215x]

@codehz 嗯。。是的。难道？？？问题在这里？

[Leviathann]

key 不要设为 index

[ryncv]

setState({TodoList: [...TodoList]})

[wenzichel]

无论是类组件还是函数组件，不要直接操作 TodoList 。

在类组件中，是使用 this.setState()来操作的；在函数组件里，是用 const [TodoList, setTodoList] = useState()这个 hook 中的第 2 个参数 setTodoList()来操作的。

[yaphets666]

vue 里直接 push 就行，react 不是这个套路

[pengtdyd]

key 不要设为 index ，key 会被动态赋值，导致不可预知的 bug

[Alander]

乍一看 append 的代码我竟看不出来这段代码是否真的会如作者所说的 1 ，2 ，3 ，4 ，5
应该全是 5 才对

[fengfuliu]

setTodoList([...todoList,'new todo!'])改成 setTodoList(prev=>([...prev,'new todo!']))

[hi20151215x]

@Alander 如果在当前组件 全是 5 ，但是传递到子组件后 就不是了。

[zhangdroid]

append 的代码应该是可以得到预期的结果的, 有问题的话有可能是 Todo 这个组件有问题, 比如用了 memo/shouldComponentUpdate

[Alander]

@hi20151215x 如 13 楼所说，希望能贴出来 Todo 组件的代码才能更好的知道为什么。至于纠正你如何去 setState 的可以忽略

[Alander]

@hi20151215x 确实是不应该直接 push ，但是你 append 后的代码更新方式已经是正确更新方式了，所以直接看一下 Todo 组件的代码应该可以发现端倪

[churchill]

你是不是在🎣啊

[hi20151215x]

@churchill 都快抓耳挠腮了。

[hi20151215x]

@Alander 代码已更新 希望得到您回复：）

[codehz]

咦 ，
const [content, setContent] = useState()
const [size, setSize] = useState()
useEffect(()=>{
setContent(props.content)
setSize(props.size)
},[content,size])
这是在干啥
用内部的 state 作为 effect 的 deps 参数吗，那肯定不会更新啊（另外推荐开 eslint
直接在 jsx 里用 props 上的属性就可以了

[westoy]

Todo 加个 key={`item-${index}-${todoList.length}`}