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;

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;

Answer 1

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

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

handleSend

作为一般做法，每当您尝试使用对象中的嵌套键时，请使用可选链。如果您使用的是 TypeScript，那么这个问题首先不会发生，因为您很可能会使用特定类型注释 args。但在这里我们可以做的就是至少提供一个可选链（使用 const handleSend = (message) => { const formattedMsg = { name: 'Some Name', message }; const newMessages = [...messages, formattedMsg]; setMessages(newMessages); } 运算符）并处理不存在消息的情况。

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

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

1 个答案: