Блог

В приведенном ниже коде есть объект messages . Код отображает список каждого имени в объекте messages. Нажав на одно из этих имен, я хотел бы отобразить сообщение, связанное с этим именем. Я почти на месте, но, похоже, не могу понять, что не так.

На данный момент я получаю сообщение об ошибке «Объекты недопустимы как дочерние элементы React» на предпоследнем useEffect, где код прерывается, хотя консоль.журнал выводит объект с идентификатором, именем и сообщением правильного пользователя. Кто-нибудь может помочь с тем, что вызывает вышеуказанную ошибку, и объяснить, как я могу правильно ссылаться на значение внутри объекта.

 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 amp;amp; 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;
 

Я действительно пытался поместить вышесказанное в раздел «фрагменты», но у меня ничего не получилось.
Любая помощь очень ценится.

Приветствия, Мэтт

Вы не устанавливаете свой theActualMessage .

messageArray возможно, он не был инициализирован. Поэтому используйте необязательную цепочку как messageArray?.message

обновите свой useEffect вызов следующим образом.

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

Рабочая закуска