时间戳

首页 > 解决方案 > 如何正确 setState 和 useEffect 从 React（钩子）中的对象读取和显示值？

reactjs - 如何正确 setState 和 useEffect 从 React（钩子）中的对象读取和显示值？

问题描述

下面的代码有一个消息对象。该代码显示消息对象中每个名称的列表。通过单击其中一个名称，我想显示与该名称关联的消息。我快到了，但我似乎无法弄清楚出了什么问题。

目前，我在倒数第二个 useEffect 上收到“对象作为 React 子项无效”错误，其中代码中断，尽管 console.log 确实输出了一个具有正确的 id、名称和消息的对象人。任何人都可以帮助解决导致上述错误的原因，并解释我如何正确引用对象中的值。

import { useEffect, useState} from 'react'

function App() {

const messages = [
    {
        posterId: 0,
        posterName: "Matt",
        message: "This is Matt's test message"
    },
    {
        posterId: 1,
        posterName: "Gordon",
        message: "This is Gordon's test message"
    },
    {
        posterId: 2,
        posterName: "Stuart",
        message: "This is Stuart's test message"
    },

]

const [posterId, setPosterId] = useState('')
const [theMessageData, setTheMessageData] = useState([])
const [messageArray, setMessageArray] = useState([])
const [theActualMessage, setTheActualMessage] = useState('')


function updatePoster(id) {
    setPosterId(id)
}

useEffect(() => {
    console.log("The ID is: ",posterId);
    getIndividualMessage();
},[posterId])

function getIndividualMessage() {
    const messageVar = messages.filter(message => message.posterId === posterId);
    setTheMessageData(messageVar)
}

useEffect(() => {
    console.log("theMessageData array is: ",theMessageData[0]);
    setMessageArray(theMessageData[0])
},[theMessageData])

useEffect(() => {
     console.log("The actual message is: ",messageArray.message);
},[messageArray])

return (
    <>
        <div>
            <ul>
                { messages && messages.map(list => (
                    <li key={list.posterId}>
                        <button onClick={() => updatePoster(list.posterId)}>{list.posterName}</button>
                    </li>
                ))}
            </ul>
        </div>

        <div>
            <ul>
                <li>{theActualMessage}</li>
            </ul>
        </div>
    </>
);
}

export default App;

我确实尝试将上述内容放在片段中，但我根本无法让它发挥作用。非常感谢任何帮助。

干杯，马特

标签： reactjsuse-effectuse-state

解决方案

你没有设置你的theActualMessage.

messageArray可能尚未初始化。所以使用可选链作为messageArray?.message

useEffect按如下方式更新您的通话。

  useEffect(() => {
    console.log('The actual message is: ', messageArray?.message);
    setTheActualMessage(messageArray?.message) //This line was missing
  }, [messageArray]);

工作零食

推荐阅读