Question

我不知道是否忘记了.map没有返回预期的组件。

这是我的代码：

    data(){
        var user = firebase.auth().currentUser;
          var uid = user.uid;
          axios.get('apilink here'+user.uid).then(function(response){
             var arr = Object.values(response.data);
             var listItems = arr.map(function(item){
               return <Text>{item.name}</Text>
             }) 
          })
      }

这就是我正在呈现的内容：

render() {
        return (
          <Container style={{backgroundColor:'#F7F7F7'}}>
            <Content>
              {this.data}
            </Content>
          </Container>
        )
      }
    }

Answer 1

你正在以错误的方式接近这一点。您的data函数首先没有返回任何内容，因此它不会在您的渲染方法中显示任何内容。您可以通过调用函数来调试它，您将看到返回的值为undefined。

您正在从远程资源加载数据，根据文档，一个好的做法是在componentDidMount中处理此问题：

componentDidMount（）在组件出现后立即调用安装。需要DOM节点的初始化应该放在这里。 如果您 需要从远程端点加载数据，这是的好地方 实例化网络请求。在此方法中设置状态触发重新渲染。

因此，解决此问题的一种方法是将data代码移动到componentDidMount()并在检索到数据后更新组件的状态。像这样：

...
constructor(props) {
  super(props);
  this.state = { data: [] };
}

componentDidMount() {
  var user = firebase.auth().currentUser;
  var uid = user.uid;
  axios.get('apilink here' + user.uid)
    .then(function(response){
      var arr = Object.values(response.data);
      this.setState({ data: arr }); 
  });
}

render() {
  return (
    <Container style={{backgroundColor:'#F7F7F7'}}>
      <Content>
        {
          this.state.data
            .map(function(item) {
              return <Text>{item.name}</Text>
            })
        }
      </Content>
    </Container>
  )
}

Answer 2

问题在于，您无法直接在渲染方法中使用data()函数，因为它是异步的。

您需要使用组件状态，该状态将在API响应后设置。

让我们说这是你的组成部分：

export default class App extends React.Component {
  constructor(props){
    super(props)
    this.state = {
      data: null
    }
    this.getData()
  }
  getData = () => {
    var user = firebase.auth().currentUser;
    var uid = user.uid;
    axios.get('apilink here'+user.uid).then(function(response){
      var arr = Object.values(response.data);
      var listItems = arr.map(function(item){
        return <Text>{item.name}</Text>
      })
      this.setState({data: listItems})
    })
  }
  render() {
    return (
      <Container style={{backgroundColor:'#F7F7F7'}}>
        <Content>
          {this.state.data}
        </Content>
      </Container>
    );
  }
}

这将允许您加载对组件的状态异步响应

javascript .map无法使用本机反应

2 个答案: