在 JSX 中显示对象的结果

我正在尝试在JSX中显示对象的结果。我在 componentWillMount（）方法中有一个 api 请求。这将返回如下对象

Object {Name: "testname", Surname: "testsurname", IdNumber: "9008067986743", Email: "test@gmail.com", Mobile: "+263 73 359 432"}

现在我需要显示例如。下面的 JSX 中的电子邮件

  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>
  );
}

请协助我，谢谢

在 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>
  );
}

您需要将状态中的数据最初设置为 null，在 componentWillMount 中调用 API 并使用 API 响应更新状态。

在下面的代码中，状态最初将为 null，因此渲染函数将返回 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>
    )
  }
}

let requestedObject = {Name: "testname", Surname: "testsurname", IdNumber: "9008067986743", Email: "test@gmail.com", 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>
      );
    }

每当你用JSX编写javascript时（在像<Text> </Text>这样的标签之间），你需要把这个javascript代码放在大括号里。

假设你的对象在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>
          );
        }

相关内容

最新更新

热门标签：