JSXのオブジェクトの結果を表示

JSXのオブジェクトの結果を表示しようとしています。私は、componentWillMount（）メソッドでapiリクエストを持っています。これはこのようなオブジェクトを返しますJSXのオブジェクトの結果を表示

Object {Name: "testname", Surname: "testsurname", IdNumber: "9008067986743", Email: "[email protected]", Mobile: "+263 73 359 432"}

今私は例えば表示する必要があります。

render(){ 
    return (
    <Container> 
     <Header /> 
     <Content> 
     <Card> 
      <CardItem>    
      <Left> 
       <Thumbnail source={{uri: 'https://openclipart.org/image/2400px/svg_to_png/177482/ProfilePlaceholderSuit.png'}} /> 
       <Body> 
       <Text>NEED EMAIL HERE</Text> 
       </Body> 
      </Left> 
      </CardItem> 
     </Card>    
     </Content> 
    </Container> 
); 
}

以下JSXでのメールはあなたが、ヌルcomponentWillMountでAPIを呼び出し、APIレスポンスで状態を更新するために最初にあなたの状態のデータを設定する必要が

出典

2017-11-02 eohdev

をお使いのAPI呼び出しの後、ちょうど

constructor(props){ 
    super(props); 
    this.state = { myObject: {} }; 
} 

componentDidMount(){ 
    //your API request here 
    .then(response => response.json().then(result => { 
    this.setState({ myObject: result }); 
    })) 
    .catch((err) => { throw err; }); 
} 

render(){ 
    return (
    <Container> 
     <Header /> 
     <Content> 
     <Card> 
      <CardItem>    
      <Left> 
       <Thumbnail source={{uri: 'https://openclipart.org/image/2400px/svg_to_png/177482/ProfilePlaceholderSuit.png'}} /> 
       <Body> 
       <Text>Email:</Text> 
       <Text>{this.state.myObject.Email}</Text> 
       <Text>Name:</Text> 
       <Text>{this.state.myObject.Name}</Text> 
       <Text>Surname:</Text> 
       <Text>{this.state.myObject.Surname}</Text> 
       <Text>ID Number:</Text> 
       <Text>{this.state.myObject.IdNumber}</Text> 
       </Body> 
      </Left> 
      </CardItem> 
     </Card>    
     </Content> 
    </Container> 
); 
}

出典

2017-11-02 10:40:10 idunno

おかげで、私はこれを試してみましたが、それはいずれも表示されない状態に応答を入れて、あなたのレンダリング方法でそれをプロット結果。 JSXのフィールドを空白にしておくだけです。私は、データが利用可能になる前に結果を表示しようとしていると思う。 – eohdev

これは正しいとマークされ、受信したデータが正しい形式 – eohdev

ありがとう、これで私を支援してください。

次のコードでは、stateはnullになるため、render関数はnullを返します。 APIの約束が完了した後、あなたの状態はsetStateによって更新され、render functionは再びAPIデータを表示するように呼び出されます。

class Example extends React.Component { 
    state = { 
    data: null 
    } 

    componentWillMount() { 
    fetch(//your endpoint) 
    .then((data) => { 
     this.setState({data}) 
    }) 
    .catch((error) => { 
     console.warn(error); 
    }) 
    } 

    render() { 
    if (!this.state.data) return null; 
    return (
     <div> 
     <span>{this.state.data.email}</span> 
     </div> 
    ) 
    } 
}

出典

2017-11-02 10:32:32

let requestedObject = {Name: "testname", Surname: "testsurname", IdNumber: "9008067986743", Email: "[email protected]", Mobile: "+263 73 359 432"} 

render(){ 
     return (
     <Container> 
      <Header /> 
      <Content> 
      <Card> 
       <CardItem>    
       <Left> 
        <Thumbnail source={{uri: 'https://openclipart.org/image/2400px/svg_to_png/177482/ProfilePlaceholderSuit.png'}} /> 
        <Body> 
        <Text>{ requestedObject.email }</Text> 
        </Body> 
       </Left> 
       </CardItem> 
      </Card>    
      </Content> 
     </Container> 
    ); 
    }

あなたは（<Text> </Text>ようなタグの間）JSXでJavaScriptを書くたびに、あなたは、中括弧でそのjavascriptのコードを配置する必要があります。

出典

2017-11-02 10:33:25

あなたのオブジェクトはthis.props.infoであると仮定します。あなたは行うことができます。

 render(){ 
     const { Email, Surname, Name } = this.props.info; 
      return (
      <Container> 
       <Header /> 
       <Content> 
       <Card> 
        <CardItem>    
        <Left> 
         <Thumbnail source={{uri: 'https://openclipart.org/image/2400px/svg_to_png/177482/ProfilePlaceholderSuit.png'}} /> 
         <Body> 
         <Text>NEED EMAIL HERE</Text> 
         <Text>{Name}</Text> 
         <Text>{Surname}</Text> 
         <Text>{Email}</Text> 
         </Body> 
        </Left> 
        </CardItem> 
       </Card>    
       </Content> 
      </Container> 
     ); 
     }

出典

2017-11-02 10:34:23 Vitiok

JSXのオブジェクトの結果を表示

答えて

関連する問題