在 JSX 中显示对象的结果答案

【问题标题】：Display results from object in JSX在 JSX 中显示对象的结果
【发布时间】：2018-04-14 20:00:55
【问题描述】：

我试图在 JSX 中显示一个对象的结果。我在 componentWillMount() 方法中有一个 api 请求。这会返回一个像这样的对象

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

现在我需要显示例如。下面JSX中的Email

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

请帮帮我，谢谢

【问题讨论】：

标签： javascript reactjs object react-native

【解决方案1】：

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

【讨论】：

谢谢，我试过了，但没有显示任何结果。它只是将 JSX 中的字段留空。我认为它试图在任何数据可用之前显示结果
这项工作，标记为正确，还需要确保传入的数据格式正确

【解决方案2】：

您需要将状态中的数据初始设置为 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>
    )
  }
}

【讨论】：

【解决方案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 代码放在花括号中。

【讨论】：

【解决方案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>
          );
        }

【讨论】：