当状态更改并且 ref 设置为另一个 div 时，引用不会更新

Question

当我在someFunc中设置元素的不透明度时，它不会设置最后一个元素的不可见性，而是设置之前的不透明度。Ref不会立即更新。

元素的不透明度将保持"不透明度"；1〃；正常情况下。这种不透明度的变化只需要最后添加的元素和短时间。

如何在someFunc的同一行访问该div的最后一个元素？

const MyComponent = () => {
const [divisions, setDivisions] = useState([]);
const itemRef = useRef();
const someFunc = () => {
const newDivision = {
id: "someId",
someData: "someText"
}
setDivisions(prevState => [...prevState, newDivision])
itemRef.current.style.opacity = "0.7"
}
return ( 
<>
<div onClick={someFunc}>Button</div>
<div className="container">
{divisions.map((item, key) => {
return <div id={item.id} ref={itemRef}>item.someData</div>
})
}
</div>
</>
)
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

Answer 1

您可以通过计算divisions(当您与从零开始的键匹配时减1-为了清晰起见，我添加了括号(…(，但它们是可选的(，轻松地将ref添加到最后一项中：

ref={key === (divisions.length - 1) && itemRef}

Answer 2

这是因为在映射的元素上使用了相同的ref。只需将div更改为以下

<div id={item.id} ref={(el) => (itemRef.current[key] = el)}>item.someData</div>

以及你对这个的功能

const someFunc = () => {
const newDivision = {
id: "someId",
someData: "someText"
}
setDivisions(prevState => [...prevState, newDivision])
for (let i = 0; i < itemRef.current.length; i++) {
if(i ===  (itemRef.current.length - 1))
{
itemRef.current[i].style.opacity = "0.7"
}
}
}

然后通过调用useEffect 通知反应

useEffect((console.log(itemRef)) => {},[itemRef])