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

Question

我正在尝试更新列表的状态。 并且需要根据ids状态重新呈现列表。 但是 array 需要参考值，每次我用setIds更新ids时，我无法获得更新的列表，因为组件没有重新渲染。 无论如何要实现这一点。 我尝试添加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])