Question

我尝试从render内部的函数中获取数据，当我使用alert（）时，它可以工作，但是当我尝试返回真实文本时，它没有显示任何东西

我使用的代码：

export default class App extends Component {
    renderResualts(){
        db.find({}, function (err, docs) {
           return docs.map(function(d){
              return(
                <Text>{d.name}</Text>
              )
           })
        })
    }
  render() {
    return (
      <View style={styles.container}>
          { this.renderResualts() }
      </View>
    );
  }
}

- 更新的代码：



export default class App extends Component {

    constructor(props){
        super(props)
        this.state = {graves:[]}
    }
    componentDidMount(){
        db.find({}, function (err, docs) {
            this.setState({graves:docs})
        })       
    }

    renderResults(){
        return this.state.graves.map(grave =>
            <Text>{grave.name}</Text>    
        )
    }
  render() {
    return (
      <View style={styles.container}>
          { this.renderResults() }
      </View>
    );
  }
}

应该显示这些数据：

{ _id：1 名称：“ Parturient”，年：2017 }，{ _id：2 名称：“ Dapibus”，年：2017 }

像这样的内部文本：ParturientDapibus

Answer 1

尝试

renderResults(){
    return (
       <View>
           this.state.graves.map(grave =>
                <Text>{grave.name}</Text>    
           )
      </View>
    );
}

Answer 2

通过像这样将数据传递给State：


export default class App extends Component {

    constructor(props){
        super(props)
        this.state = {graves:[]}
    }
    componentDidMount(){
        db.find({}, (err, docs)=> {
            this.setState({graves:docs})
        })       
    }

    renderResults(){
        return this.state.graves.map(grave =>
            <Text key={grave._id}>{grave.name}</Text>    
        )
    }
  render() {
    return (
      <View style={styles.container}>
          { this.renderResults() }
      </View>
    );
  }
}

将数据从函数读取到render方法内的<view>组件中

2 个答案: