2017-12-31 22 views
0

처음을 접하십니까와 javascript. 나는 지금 그것을 연구 중이고 React 클라이언트의 서버에서 문자열을 가져 와서 표시하려고했습니다.fetch()가 반환 한 응답의 텍스트에 액세스하는 방법?

const express = require('express'); 

const app = express(); 
app.set("port", process.env.PORT || 3001) 

app.use(express.static("ayersapp/build")); 

app.get('/message', (req, res) => { 
    res.send('Hello first respond!'); 
}); 

app.listen(app.get("port")); 

App.js

import React, { Component } from 'react'; 
import logo from './logo.svg'; 
import './App.css'; 
import Message from './message' 

class App extends Component { 
    render() { 
    return (
     <div className="App"> 
     <header className="App-header"> 
      <img src={logo} className="App-logo" alt="logo" /> 
      <h1 className="App-title">Welcome to React</h1> 
     </header> 
     <p className="App-intro"> 
      To get started, edit <code>src/App.js</code> and save to reload. 
     </p> 
     <Message /> 
     </div> 
    ); 
    } 
} 

export default App; 

message.js

server.js 아래로 내 코드 내가 그 때는 사용하여 문자열 데이터에 액세스 할 수 있습니다 here에서

import React, {Component} from 'react'; 

class Message extends Component { 
    constructor(props) { 
     super(props); 
     this.state = {message: "abc"}; 
    } 

    componentDidMount() { 
     fetch(`/message`).then(m=>{ 
      this.setState(
       {message: m.blob()} 
      ); 
     }); 
    } 

    render(){ 
     const msg = this.state.message; 
     return <p>{msg}</p>; 
    } 
} 

export default Message; 

(() => {}). 하지만이 오류가 발생했습니다

Objects are not valid as a React child (found: [object Promise]). If you meant to render a collection of children, use an array instead. 
    in p (at message.js:19) 
    in Message (at App.js:17) 
    in div (at App.js:9) 
    in App (at index.js:7) 

아무도 내가 약속 한 객체의 문자열에 액세스 할 수있는 방법을 알려주시겠습니까?

답변

1

이 시도 :

+0

가 작동하지

fetch('https://jsonplaceholder.typicode.com/posts/1') .then(response => response.text()) .then(text => { console.log('text = ', text) // this.setState({ // message: text // }) })
, 그것은 텍스트 @BingLan 코드를 입증하는 작업 스 니펫 (snippet)을 추가 정의되지 않은 –

+0

이 – thedude

+0

감사합니다 노력하고있다 불평! response.text() 전에 return을 추가하여 https://davidwalsh.name/fetch에서 가져온 이유는 무엇입니까? –

관련 문제