无法在React组件中呈现json

siv3szwd 于 2022-11-19 发布在 React

关注(0)|答案(2)|浏览(138)

我在React组件中呈现JSON对象时遇到了一些问题。我想获取一个随机单词的含义，然后在页面中呈现它。
我的应用程序.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 //

}

我确实收到了对象，因为我可以控制台记录它。我如何在页面上呈现它？我哪里出错了？
先谢谢你，

JSON

来源：https://stackoverflow.com/questions/74373467/unable-to-render-json-in-react-component

2条答案

按热度按时间

wgxvkvu91#

你不能在React中渲染对象。你可以把对象转换成一个字符串，然后渲染这个字符串

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

赞(0）回复(0）举报 2022-11-19

zaqlnxep2#

通过修改代码来修复它;问题出在索引

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中设置了该函数，然后在App.js中调用了该组件。
谢谢你抽出时间来帮忙。

赞(0）回复(0）举报 2022-11-19

我来回答

无法在React组件中呈现json

2条答案

相关问题

热门标签

最新问答