Question

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

请帮助我，谢谢

Answer 1

在API调用之后，只需将响应置于状态，并将其绘制在渲染方法

中

ALTER TABLE `sale_data` ADD INDEX `test1` (`item_code`, `customer_code`, `invoice_date`, `depo_code`, `total_sale`);

Answer 2

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

在下面的代码中，最初的状态为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>
    )
  }
}

Answer 3

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代码放在大括号中。

Answer 4

假设您的对象位于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>
          );
        }

显示JSX中对象的结果

4 个答案: