Question

我正在尝试更新列表的状态。并且需要根据 ids 状态重新呈现列表。但是数组采用参考值，每次我用 ids 更新 setIds 时，我无法获得更新的列表，因为组件没有重新渲染。无论如何要实现这一点。我尝试添加 const [idsLength, setIdsLength] = useState(0) 并在列表中传递和更新它。但我觉得有一个更好的方法。

const Component1 = () => {
  const [ids, setIds] = useState([]);
  
  const handleIdClick = () => {
    const temp = ids
    temp.push(ids.length)
    setIds(temp)
    console.log(ids)
  }
  
  return(
    <div>
        <div onClick={handleIdClick}>
            Id Adder
        </div>
        {ids.map(id=>{
            return(
                <div key={id}>
                    {id}
                </div>
            )
        })}
    </div>
  )
}

Answer 1

你只需要使用 useEffect 钩子

  useEffect(() => {
    console.log("ids :" + ids);
  }, [ids]);

Answer 2

您可以创建一个包含更新内容的新数组并将其传递给 setIds

const handleIdClick = useCallback(() => {
    setIds([...ids, ids.length]);
}, [ids])

组件不会在状态更改时重新呈现

2 个答案: