处于状态的对象数组在 React 应用程序中未正确更新

Question

我正在尝试制作一个消息列表并在添加更多消息时对其进行更新，我想我遗漏了一些东西但无法分辨是什么。

App 有 2 个组件 - Messages 和 SendMessage，Messages 映射到一组 Message Component 上。 SenMessage 有一个表单，可以更新消息状态中的数组存储。

提前感谢您的帮助。

App.js

function App() {
const [messages, setMessages] = useState([{name: 'ken', 'message': "hayyy"},{name: 'kendra', 'message': "hayyy"}])

const handleSend = (message) => {
    const newMessages = [...messages];
    newMessages.push(message);
    setMessages(newMessages);
    console.log(message)
  }

return (
<div className="App">
<Messages messages={messages} />
<SendMessage onSend={handleSend}/>
</div>
  );
}
export default App;

Messages.js

const Messages = (props) => {
const messages = props.messages.map((message, index) => {
    return (
        <Message 
            key={index}
            name={message.name}
            message={message.message}
        />
    )})
return (
    <div>
    {messages}
    </div>
)}
export default Messages;

Message.js

const Message = (props) => {
    return (
        <div className="Message">
          <p className="message">{props.message}</p>
          <p className="name">{props.name}</p>
        </div>
    )}

export default Message;

发送Message.js

const SendMessage = (props) => {
    const [inputMessage, setInputMessage] = useState('')
    const handleSubmit = (event) => {
        event.preventDefault();
        props.onSend(inputMessage);
        setInputMessage('')
    }
    const handleChange = (event) => {
        setInputMessage(event.target.value)
    }

    return (
        <div className="SendMessage">
          <form onSubmit={handleSubmit}>
            <input 
                type="text" 
                placeholder="enter message" 
                value={inputMessage}
                onChange={handleChange}
            />
            <button>Send</button>
          </form>
        </div>
    )}
export default SendMessage;

Answer 1

我在这里看到的主要问题是，在 SendMessage 组件中，您将状态保存到一个字符串并尝试发送到一个 handleSend 函数，该函数需要一个带有键的对象name 和 message.

因此您可以像这样更新 handleSend 函数：

const handleSend = (message) => {
    const formattedMsg = { name: 'Some Name', message };
    const newMessages = [...messages, formattedMsg];
    setMessages(newMessages);
}

另外，当您尝试使用对象中的嵌套键时，通常使用可选链接。如果您使用的是 TypeScript，那么这个问题一开始就不会发生，因为您很可能会用特定类型注释 args。但在这里我们可以做的是至少提供一个可选链（使用 ? 运算符）并处理不存在消息的情况。

const messages = props.messages.map((message, index) => (
        <Message 
            key={index}
            name={message?.name}
            message={message?.message}
        />
));

if (!messages) {
 return (
   <p>No messages...</p>
 )
}

[编辑] 我现在看到@DrewReese 评论了类似的答案。发帖前没看到

处于状态的对象数组在 React 应用程序中未正确更新

Array of objects in state not updating correctly in React app

reactjs

react-state-management

react-hooks

react-state

use-state