React Native map() 和數組中的 JSX 元素

Question

嘗試使用 map() 在 React Native 中呈現 JSX 元素數組（this.state 中的 tableData），但我在控制台上得到了一個包含未定義元素的數組。

這是我的代碼：

const TVSHOWIMAGETITLES = [
    MoneyHeist, BreakingBad,
    MoneyHeist, BreakingBad,
    MoneyHeist, BreakingBad,
    MoneyHeist, BreakingBad,
    MoneyHeist];

class HashTablesScreenTwo extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            fiveShows: this.props.route.params.selectedShows,
            tableHead: ['Week', 'TV Shows'],
            tableWeeks: [1, 2, 3, 4, 5],
            tableData: []
        }
    }

renderTableData(){
        const jsxArray = this.state.tableWeeks.map((i)=>{this.renderTVShowImageTitle(i-1)})
        console.log(jsxArray)
        console.log(this.state.tableWeeks)
        return{
            tableData: jsxArray
        }
    }
    renderTVShowImageTitle(i) {
        let index = this.state.fiveShows[i];
        return (
            <TVShow
                id={index}
                imageSource={TVSHOWIMAGETITLES[index]}
                onClick={() => 1}
            />
        )
    }

render() {
        const state = this.state;
        { this.renderTableData() }
        return (
            <View>

                <Text>
                    Because you're ambitious,
                    you have decided to binge watch the shows at a rate of one show per week.
                    Here's how your planned schedule looks based on the order you have selected the shows:
                </Text>

                <View style={styles.container}>
                    <Table borderStyle={{ borderWidth: 2, borderColor: '#c8e1ff' }}>
                        <Row data={state.tableHead} style={styles.head} textStyle={styles.text} />
                        <Col data={state.tableWeeks} />
                        <Col data={state.tableData} />
                    </Table>
                </View>
        );
    }
}

如果有人能指出我在這里做錯了什么，將不勝感激。 謝謝！

Answer 1

您需要從 map function 中刪除花括號，如下所示：

const jsxArray = this.state.tableWeeks.map((i)=> this.renderTVShowImageTitle(i-1))

或者使用 return 語句：

const jsxArray = this.state.tableWeeks.map((i)=> { 
                                return this.renderTVShowImageTitle(i-1)
                            })