Как использовать данные JSON в React

#json #reactjs #axios

#json #reactjs #аксиос

Вопрос:

Я не понимаю, как использовать данные JSON в React. Мой код:

   function App() {
  const [image, setImage] = useState();
  const getImage = () => {
    axios.get('http://localhost:5000/api')
    .then(function (res) {
    setImage(res.data);
    })
   
  }

  useEffect(()=>{
    getImage()
  }, [])`

Ответная реакция:

 {
    "title": "this is a title",
    "description": "",
    "tags": "",
    "isSorted": false,
    "passed": false
}

Сообщение об ошибке:

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

Скриншот

1. добавьте console.log(res) в свой . затем выполните обратный вызов функции и опубликуйте ее здесь. Скорее всего, вы пытаетесь присвоить своему изображению объект вместо строки.

2. вероятно, у вас есть проблема в вашей логике рендеринга… Вы пытаетесь напрямую отображать данные JSON

3. Я понимаю, что я передаю объект. Что я должен делать с этим объектом json?

4. Я передаю его государству с помощью setImage(). Не разрешена ли передача объекта в состояние?

5. Там нет JSON. res Переданное then функции выключение axios вызова является объектом. JSON — это текстовый формат. Вот почему вы получаете сообщение об ошибке о том, что объекты не являются допустимыми дочерними элементами React, а не об ошибке о том, что текст не является допустимым дочерним элементом React.

Ответ №1:

 // Get a hook function
const {useState, useEffect} = React;

const App = () => {
  const [images, setImages] = useState(0);
  
  useEffect(() => {
      setTimeout(() => {
         setImages({title: 'Foo', description: 'Bar...'});
      }, 1000);
  }, []);

  return images ? <p>{images.title}</p> : <p>Loading images...</p>;
};

// Render it
ReactDOM.render(
  <App />,
  document.getElementById("react")
);

 <script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.4/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.4/umd/react-dom.production.min.js"></script>
<div id="react"></div>

Развернуть фрагмент кода

Я думаю, проблема в том, что вы пытаетесь отобразить объект вместо того, чтобы отображать каждое из полей. Поскольку я не вижу вашей полной App реализации компонента, я дам вам лучший ответ, который я могу.

 function Image(props) {
   return ( 
     <>
       <h1>{props.title}</h1>
       <p>{props.descriptio</p>
     </>
   );
}

function App() {
  const [image, setImage] = useState();
  const getImage = () => {
    axios.get('http://localhost:5000/api')
    .then(function (res) {
    setImage(res.data);
    })
   
  }

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

  // This is assuming how your App component SHOULD look
  return (<Image image={image} />);
}

Вероятно, вы получаете эту ошибку, потому что вы не можете отобразить весь объект целиком, но вместо этого вам нужно отобразить каждое поле.

Однако ваша логика выборки выглядит правильной!

1. Я должен был включить это, извините. return ( <div className="App"> <header className="App-header"> <p>{image}</p> </header> </div>

2. Если я попробую что-то вроде {image.title), он скажет мне, что заголовок не определен.

3. Это связано с тем, что во время первоначального рендеринга ваши данные еще недоступны, вы извлекаете данные асинхронно из-за useEffect() .

4. Что вам нужно сделать, это добавить IF, чтобы увидеть, доступны ли данные. Дайте мне секунду, я создаю для вас рабочий пример, который вы сможете реализовать 🙂

5. Итак, что мне делать? Я просто хочу получить значения объекта в элементе <p> .