Question

我编写了一个函数，可以基于对象动态渲染视图。但是该函数在调用时不会呈现任何视图。

我尝试在函数中添加和删除render（），但似乎不起作用。

        var arr = this.state.response;
        Object.keys(arr).map(key => {
            console.log(arr[key]);
            return (
                <View style={{ flex: 1, alignSelf: 'stretch', flexDirection: 'row' }}>
                    <View style={{ flex: 1, alignSelf: 'stretch'}}>
                        <Text>{key}</Text>
                    </View>
                    <View style={{ flex: 1, alignSelf: 'stretch'}}>
                        <Text>{arr[key].sales}</Text>
                    </View> 
                    <View style={{ flex: 1, alignSelf: 'stretch'}}>
                        <Text>{arr[key].sales}</Text>
                    </View> 
                    <View style={{ flex: 1, alignSelf: 'stretch'}}>
                        <Text>{arr[key].sales}</Text>
                    </View> 
                    <View style={{ flex: 1, alignSelf: 'stretch'}}>
                        <Text>{arr[key].sales}</Text>
                    </View>
                </View>
            )
        })
    }

然后在这样的视图中调用renderRow函数

    render() {
        return (
            <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
                <View style={{ flex: 1, alignSelf: 'stretch', flexDirection: 'row' }}>
                    <View style={{ flex: 1, alignSelf: 'stretch' }}>
                        <Text>Name</Text>
                    </View>
                    <View style={{ flex: 1, alignSelf: 'stretch' }}>
                        <Text>Sales</Text>
                    </View> 
                    <View style={{ flex: 1, alignSelf: 'stretch' }}>
                        <Text>Commission</Text>
                    </View> 
                    <View style={{ flex: 1, alignSelf: 'stretch' }}>
                        <Text>Payout</Text>
                    </View> 
                    <View style={{ flex: 1, alignSelf: 'stretch' }}>
                        <Text>Profit</Text>
                    </View>
                </View>
                {this.renderRow()}
            </View>
        );
    }

Answer 1

您的renderRow函数不返回任何内容...

return Object.keys(arr).map(key => {

Answer 2

更改renderRow功能

renderRow = () => {
   const arr = this.state.response;
   return Object.keys(arr).map(key => 
                <View style={{ flex: 1, alignSelf: 'stretch', flexDirection: 'row' }}>
                    <View style={{ flex: 1, alignSelf: 'stretch'}}>
                        <Text>{key}</Text>
                    </View>
                    <View style={{ flex: 1, alignSelf: 'stretch'}}>
                        <Text>{arr[key].sales}</Text>
                    </View> 
                    <View style={{ flex: 1, alignSelf: 'stretch'}}>
                        <Text>{arr[key].sales}</Text>
                    </View> 
                    <View style={{ flex: 1, alignSelf: 'stretch'}}>
                        <Text>{arr[key].sales}</Text>
                    </View> 
                    <View style={{ flex: 1, alignSelf: 'stretch'}}>
                        <Text>{arr[key].sales}</Text>
                    </View>
                </View>
}

React Native函数动态渲染Element不会渲染任何东西

2 个答案: