Estoy tratando de mostrar la respuesta json después de llamar a una API usando fetch , puedo ver la respuesta en la pestaña de respuesta de chrome, pero no puedo encontrarla en el objeto de respuesta fetch

Lado del cliente

  import React from 'react'; import './App.css'; class App extends React.Component { constructor(props) { super(props) this.state = { query: '', properties: [] } this.search = this.search.bind(this); this.handleChange = this.handleChange.bind(this) } handleChange(event) { const { name, value } = event.target; // const { query } = this.state.query; this.setState({ [name]: value }); } search() { console.log('fetching data') try { fetch('http://localhost:3000/property/find', { method: 'POST', mode: 'CORS', body: JSON.stringify({ "query": this.state.query }), headers: { 'Content-Type': 'application/json' } }).then(res ={amp}gt; res.json()) .then((data) ={amp}gt; { console.log(data) this.setState({ properties: data.result }); }) } catch (err) { return err; } } render() { const { properties } = this.state; return ( {amp}lt;div className="App" {amp}gt; {amp}lt;input type="text" name="query" onChange={this.handleChange}{amp}gt;{amp}lt;/input{amp}gt; {amp}lt;div className="form-group"{amp}gt; {amp}lt;button className="btn btn-primary" onClick={this.search}{amp}gt;Search{amp}lt;/button{amp}gt; {amp}lt;/div{amp}gt; {amp}lt;div className="row text-center"{amp}gt; {properties.items {amp}amp;{amp}amp; properties.items.map((property, index) ={amp}gt; {amp}lt;div className="col-lg-3 col-md-6 mb-4" key={index}{amp}gt; {amp}lt;div className="card h-100"{amp}gt; {amp}lt;img className="card-img-top" src="https://placehold.it/500x325" alt="node.js - Cómo analizar la respuesta json usando fetch API" /{amp}gt; {amp}lt;div className="card-body"{amp}gt; {amp}lt;h4 className="card-title"{amp}gt; {property.details.description}{amp}lt;/h4{amp}gt; {/* {amp}lt;p className="card-text"{amp}gt;{property.biography}{amp}lt;/p{amp}gt; */} {amp}lt;/div{amp}gt; {amp}lt;div className="card-footer"{amp}gt; {amp}lt;a href="#" className="btn btn-primary"{amp}gt;Find Out More!{amp}lt;/a{amp}gt; {amp}lt;/div{amp}gt; {amp}lt;/div{amp}gt; {amp}lt;/div{amp}gt; ) } {amp}lt;/div{amp}gt; {amp}lt;/div{amp}gt; ) } } export default App; 

Lado del servidor

 var app = express(); const server = http.createServer(app); const io = socketIo(server); var db = require('./db'); var property = require('./endpoint/property'); // var authController = require('./auth/AuthController'); app.use(function (req, res, next) { // Website you wish to allow to connect res.setHeader('Access-Control-Allow-Origin', 'http://localhost:3001'); // Request methods you wish to allow res.setHeader('Access-Control-Allow-Methods', 'GET, POST, OPTIONS'); // Request headers you wish to allow res.setHeader('Access-Control-Allow-Headers', 'X-Requested-With,content-type'); next(); }); //allow OPTIONS on just one resource // app.post('*', cors()) app.use(cors()) app.use('/property', property); 

Respuesta de punto final

  var express = require('express'); var router = express.Router(); var bodyParser = require('body-parser'); router.use(bodyParser.urlencoded({ extended: true })); router.use(bodyParser.json()); var Model = require('../model/propertyModel'); // GETS A SINGLE USER FROM THE DATABASE router.post('/find',function (req, res) { var query = req.body.query console.log(query) Model.find( { $text: { $search: query }} , { score: { $meta: "textScore" } }).sort( { score: { $meta: "textScore" } } ).then((data)={amp}gt;{ if(data.length{amp}gt;0){ res.status(200).json({"result":data}); } if (data.length==0){ Model.find({ "details.description": {$regex:query} }).sort( { score: { $meta: "textScore" } } ).then((data)={amp}gt;{ if(data){ res.status(200).json({"result":data}); } if (data.length==0) return res.status(404).send("No properties found."); }) } }) }); 

ingrese la descripción de la imagen aquí

ingrese la descripción de la imagen aquí

ingrese la descripción de la imagen aquí

Dentro del método de representación, parece que properties.items se espera que sea una matriz. Pero en la captura de pantalla de la respuesta de la pestaña de red, el campo de result dentro de la respuesta JSON es una matriz.

Llamar a this.setState({ properties: data.result }); conducirá a que las properties sean el campo sobre el que debe asignar el método de representación, en lugar de properties.items

Dentro de su método de renderizado, si cambia esto:

 {properties.items {amp}amp;{amp}amp; properties.items.map((property, index) ={amp}gt; 

…a esto:

 {properties {amp}amp;{amp}amp; properties.map((property, index) ={amp}gt; 

Eso debería resolver esto por ti.