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

• 请不要在回答技术问题时复制粘贴 AI 生成的内容

This topic created in 1387 days ago, the information mentioned may be changed or developed.

	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

Supplement 1 · Jul 26, 2022

  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

Supplement 2 · Jul 26, 2022

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

27 replies • 2022-07-27 10:19:45 +08:00

happyeveryday

Jul 26, 2022

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

codehz

Jul 26, 2022

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

hi20151215x

Jul 26, 2022

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

hi20151215x

Jul 26, 2022

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

Leviathann

Jul 26, 2022

key 不要设为 index

ryncv

Jul 26, 2022

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

wenzichel

Jul 26, 2022

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

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

yaphets666

Jul 26, 2022

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

pengtdyd

Jul 26, 2022

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

Alander

Jul 26, 2022

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

fengfuliu

Jul 26, 2022

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

hi20151215x

Jul 26, 2022

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

zhangdroid

Jul 26, 2022

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

Alander

Jul 26, 2022

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

Alander

Jul 26, 2022

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

churchill

Jul 26, 2022

你是不是在🎣啊

hi20151215x

Jul 26, 2022

@churchill 都快抓耳挠腮了。

hi20151215x

Jul 26, 2022

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

codehz

Jul 26, 2022

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