javascript - React Native 函数不返回

Question

我的 React Native 应用程序中有一个页面 RepsPage，它根据 ID 数组呈现 ScrollView 。我将此数组传递给另一个函数 renderRep 并尝试返回数组中每个项目的 View ，但返回的只是空的。我尝试对其进行调试，似乎正在传递数据库中的对象，并且肯定有要显示的内容，但它只是没有使其成为返回函数的方式。我已经尝试了多次迭代(在 Firebase 查询中具有返回函数)，但似乎没有任何效果。附代码:

export default class RepsPage extends Component {

renderRep(repID){
        var rep = new Firebase('https://ballot-app.firebaseio.com/congressPerson');       
        var nameView;
        var partyView;
        //entire function not executing? 
        rep.orderByChild("bioguideId").equalTo(repID).on("child_added", function(snapshot) {
            console.log(snapshot.val());

            nameView = <View style ={styles.tagContainer}>
                    <Text>{snapshot.val().name}</Text>
                    <Text>{snapshot.val().party}</Text>
               </View>
        });

        return (
            nameView
        );
}  

render(){ 
    var user = this.props.user;
    var reps = user.representatives;

    return (
        <ScrollView
            automaticallyAdjustContentInsets={false}
            scrollEventThrottle={200}
            style={styles.scrollView}
        >
                { reps.map(this.renderRep.bind(this)) }
        </ScrollView>
    );
}
}

Answer 1

您的 renderRep 方法应该设置状态而不是返回值。

类似这样的事情。请注意，我尝试编写此“盲目”代码:

export default class RepsPage extends Component {
    construct() {
        this.state = {
            snapshots: []
        }
    }

    componentDidMount(){
        this.fetchRep('someid');
    }

    fetchRep(repID) {
        var rep = new Firebase('https://ballot-app.firebaseio.com/congressPerson');
        var nameView;
        var partyView;
        //entire function not executing?

        rep.orderByChild("bioguideId").equalTo(repID).on("child_added", (snapshot)=> {
            console.log(snapshot.val());
            this.setState({snapshots: [].concat(this.state.snapshots, [snapshot.val()])});
        });
    }

    renderRep() {
        return this.state.snapshots.map((snapshot)=>
            <View style={styles.tagContainer}>
                <Text>{snapshot.name}</Text>
                <Text>{snapshot.party}</Text>
            </View>
        );
    }

    render() {
        var user = this.props.user;
        var reps = user.representatives;

        return (
            <ScrollView
                automaticallyAdjustContentInsets={false}
                scrollEventThrottle={200}
                style={styles.scrollView}
            >
                { this.renderRep.bind(this) }
            </ScrollView>
        );
    }
}