不知道為什么我的 api 回應沒有在 UI 中呈現。不過，它確實在控制臺中成功顯示了回應。
錯誤：物件作為 React 子物件無效（找到：帶有鍵 {result} 的物件）。如果您打算渲染一組子項，請改用陣列。
import React from 'react'
import { useState, useEffect } from 'react'
import axios from 'axios'
import * as ReactBootStrap from 'react-bootstrap'
const TextGenerator = () => {
const [usertext, setUsertext] = useState('hello')
let [result, setResult] = useState(null)
let [loading, setLoading] = useState(true)
const handleSubmit = (e) => {
e.preventDefault()
// const text = { usertext }
axios
.get(`http://127.0.0.1:8000/computer programming`)
.then((res) => {
console.log(res)
console.log(res.data)
result = res.data
setResult({ result })
setLoading(false)
})
.catch((error) => console.error(`Error: ${error}`))
}
return (
<div className='text-center .w-75'>
<br />
<form onSubmit={handleSubmit}>
<input
type='text'
required
size='80'
placeholder='Enter text...'
value={usertext}
onChange={(e) => setUsertext(e.target.value)}
/>
<button>Generate Text</button>
</form>
<div>
{loading ? <ReactBootStrap.Spinner animation='grow' /> : { result }}
</div>
</div>
)
}
export default TextGenerator
uj5u.com熱心網友回復：
Reactobject當它嘗試渲染resultin時會在下面看到state。
{
result: {
result: <your_data - res.data>
}
}
嘗試
{loading ? <ReactBootStrap.Spinner animation='grow' /> : result}
代替
{loading ? <ReactBootStrap.Spinner animation='grow' /> : { result }}
反應無法呈現object像{ result }
并且它仍然會失敗，因為您將其包裝并保存result為object.
改變
setResult({ result })
到
setResult(result)
如果這仍然會失敗res.data不是一個型別的string或array的JSX/string 元素。
轉載請註明出處，本文鏈接：https://www.uj5u.com/caozuo/367430.html
標籤：javascript 反应 公理