求助一下关于 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

  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>
  )
}

[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}`}

[freeman12]

子组件直接 props.size 用就好了，干嘛存到自己的 state

[freeman12]

这样<View>内容：{content} TodoList 尺寸：{props.size}</View>

[silk]

,[content,size] 去掉观察目标 有变化就更新 或者按照#19

[yunyuyuan]

你 todo 组件 useEffect 的依赖填错了，应该是 props.content 和 props.size ，而且这样写是脱裤子放屁。。。

[hi20151215x]

@codehz
@westoy
@freeman12
@silk
谢谢大家 问题已经解决啦。使用了 freeman12 的主意 ：） 🙏感谢

[shakukansp]

props 变动可以触发组件重渲染，所以
function Todo(props) {
return (
<View>内容：{props.content} TodoList 尺寸：{props.size}</View>
)
}

[Envov]

useEffect(() => {
setContent(props.content);
setSize(props.size);
}, [content, size]);
这个依赖项写错了，导致结果是 useEffect 内的函数不会执行