react数组插入

攀仔博客 / 2025-01-15 / 原文

1、定义数组:

const [items, setItems] = useState([]);

2、普通js写法插入:

setItems([...items,newItem])

但是由于react是异步渲染的,这种更新方式可能会导致渲染不同步

3、推荐更新方式:使用setState方法,并提供一个函数,该函数接收先前的状态,并返回一个更新后的状态。

const addItem = (newItem) => {
setItems(prevItems => [...prevItems, newItem]);
};
注意,如果表达式的箭头函数后面不跟花括号{ },就不需要使用return,如果使用花括号{ },就必须使用return
例:
const updateChatRecord=(newMessage)=>{
setMessages((prevMessages) => { //跟花括号
    return [...prevMessages, newMessage];
}
)}