無法在 React 組件中呈現 json

Question

我在 React 組件中呈現 JSON object 時遇到一些問題。 我想獲取一個隨機單詞的含義，然后將其呈現在頁面中。

我的 App.js；

function App() {
const [meaning,setMeaning] = useState([]);
};

useEffect(()=>{
    getMeaning()
}, [])

const getMeaning = async ()=>{
  const response = await fetch(`https://api.dictionaryapi.dev/api/v2/entries/en/${word}`)
 const data = await response.json();
  setMeaning(data) 
}

<AppContext.Provider value={{word,setWord, meaning,setMeaning}}

我的意思.js

function Meaning(){
    const{
        meaning,
        setMeaning,
    } = useContext(AppContext);

    if (!meaning.length) return <div>loading</div>

    return{meaning}
// tried return json.stringify{meaning} as well //


}

我確實收到了 object，因為我可以控制台記錄它。 如何在頁面上呈現它？ 我哪里錯了？

提前致謝，

Answer 1

你不能在 React 中渲染對象。 您可以將 object 轉換為字符串並根據需要呈現字符串

return (
  <div>{JSON.Stringify(meaning)}</div>
)

Answer 2

通過稍微更改代碼來修復它； 問題出在索引上

function Meaning() {
    const [meaning,setMeaning] = useState([]);
    
    const {
        correctWord
    } = useContext(AppContext)

    useEffect(()=>{
        axios.get(`https://api.dictionaryapi.dev/api/v2/entries/en/${word}`)
        .then(res=>{
            console.log(res)
            setMeaning(res.data[0])
            
        })
        .catch(err => {
            console.log(err)
            
        })
        
    },[])
  return (
<div>
        <ul>
                {
                    
                    <div>
                    {meaning.word} {""}
                    <p>{meaning.phonetic}</p>
                    <p>{meaning.meanings[0]?.partOfSpeech}</p>
                    <p>{meaning.meanings[0]?.definitions[0]?.definition}</p>
                    
                    </div>
                    
                }
        </ul> 
    </div>

我在 Meaning.js 中設置了 function，然后在 App.js 中調用了組件。

感謝您花時間嘗試提供幫助。