Не уверен, почему мой ответ api не отображается в пользовательском интерфейсе. Однако он успешно отображает ответ в консоли.

Ошибка: объекты недопустимы как дочерние объекты React (найдено: объект с ключами {результат}). Если вы хотели отобразить коллекцию дочерних элементов, используйте вместо этого массив.

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
1
syedshabbir 27 Ноя 2021 в 13:59
Если ответ будет json, React выдаст ошибку. потому что React не может отображать json в детстве
 – 
Seyed Kazem Mousavi
27 Ноя 2021 в 14:05

1 ответ

Лучший ответ

React видит ниже object, когда пытается отобразить result в state.

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

Пытаться

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

Вместо того

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

React не может отображать object как { result }

И он все равно не удастся, поскольку вы оберните и сохраните result как object.

+ Изменить

setResult({ result })

Чтобы

setResult(result)

Это все равно не удастся, если res.data не является типом string или array элементов JSX / string.

0
Amila Senadheera 27 Ноя 2021 в 14:22
@syedshabbir, зацени !!
 – 
Amila Senadheera
27 Ноя 2021 в 14:11
Потрясающие! Работает как часы.
 – 
syedshabbir
27 Ноя 2021 в 14:14