React hooks：useState，嵌套在 for 循环中的 Updater 函数不更新状态

Question

我有一个 useEffect 挂钩，我在其中通过换行符从状态中拆分字符串以创建数组，

那个数组正在循环，我想要的是将一个对象添加到我的 state/hook (messageContainer) 和 id 以及一条消息属性例如 {id: i, message: messageRow[i]}如果它不存在或更新它，例如 return {...messageObj, message: messageRow[i]}

const [messages, setMessages] = useState('');

const [messagesContainer, setMessagesContainer] = useState([])

useEffect(() => {
var messageRow = messages.split('\n');

for (let i = 0; i < messageRow.length; i++) {
    setMessagesContainer(previousState => (
        [...previousState,
            ...previousState.map((messageObj, index, arr) => {
                if (messageObj.id === i) {
                    return {
                        ...messageObj,
                        message: messageRow[i]
                    }
                } else {
                    return {
                        id: i,
                        message: messageRow[i]
                    }
                }
            })
        ]
    ))
}
}, [messages])

messagesContainer 回来是空的？

如果数组中有带有属性的对象，我该如何更新数组？如果它尚不存在，我该如何添加？

提前致谢！

更新：

正如巴特在下面提到的，我应该初始化 messageContainer

所以我做了：

const [messagesContainer, setMessagesContainer] = useState([{id: 0, messages: null}])

但现在它只是附加到数组而不是更新同一个对象:

Answer 1

在 useEffect 中尝试类似下面的代码。它会起作用。

useEffect(() => {
var messageRow = messages.split("\n");
let allMessages = [...messagesContainer]
for (let i = 0; i < messageRow.length; i++) {
  let match = allMessages.filter(item=>item.id===i);
  if(match?.length){
    match[0].messages=messageRow[i];
  }
  else{
    allMessages.push({id:i,messages:messageRow[i]})
  }
}
console.log(allMessages);
setMessagesContainer(allMessages);
}, [messages]);

React hooks：useState，嵌套在 for 循环中的 Updater 函数不更新状态

React hooks: useState, Updater function nested in for loop not updating state

reactjs

react-hooks

react-state

array.prototype.map