React Axios 获取错误响应 Objects are not valid as a React child

Question

不知道为什么我的 api 响应没有在 UI 中呈现。 它确实成功地在控制台中显示了响应。

错误：对象作为 React 子对象无效（找到：object 和键 {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

Answer 1

当React尝试在state中呈现result时，它会在下面看到object 。

{
    result: {
        result: <your_data - res.data>
    }
}

尝试

{loading ? <ReactBootStrap.Spinner animation='grow' /> : result}

代替

{loading ? <ReactBootStrap.Spinner animation='grow' /> : { result }}

React 无法像{ result }那样渲染object

而且它仍然会失败，因为您将result包装并保存为object 。

改变

setResult({ result })

至

setResult(result)

如果res.data不是string类型或JSX / string元素array ，这仍然会失败。