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

【问题标题】：Array of objects in state not updating correctly in React appReact 应用程序中处于状态的对象数组未正确更新
【发布时间】：2021-06-27 02:54:40
【问题描述】：

我正在尝试创建一个消息列表并在添加更多消息时对其进行更新，我想我遗漏了一些东西，但不知道它是什么。

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;

消息.js

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

export default Message;

SendMessage.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;

【问题讨论】：

有什么问题？什么没有按预期工作？
@DrewReese 当我点击发送按钮时，新消息显示在数组中，但显示为空。
“出现在数组中但显示为空”是什么意思？
当你打电话给handleSend时，你似乎没有发送任何message
啊，我现在明白了，inputMessage 和 message 是字符串，但您希望使用 name 和 message 属性呈现消息对象。

标签： reactjs react-hooks use-state react-state react-state-management

【解决方案1】：

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

因此，您可以像这样更新您的 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 评论了一个类似的答案。发之前没看到。

【讨论】：