[英]Render Content Dynamically from an array map function in React Native
I'm trying to get data from an array and using map function to render content. 我正在尝试从数组中获取数据并使用map函数来呈现内容。 Look at
看着
**{this.lapsList()}**
and the associated 和相关的
**lapsList()**
function to understand what I'm trying to do. 功能,以了解我正在尝试做什么。 The result is nothing is displaying (Views under view, etc.) Here is my simplified code:
结果是什么都没有显示(视图下的视图等)这是我的简化代码:
class StopWatch extends Component {
constructor(props) {
super(props);
this.state = {
laps: []
};
}
render() {
return (
<View style={styles.container}>
<View style={styles.footer}>
<View><Text>coucou test</Text></View>
{this.lapsList()}
</View>
</View>
)
}
lapsList() {
this.state.laps.map((data) => {
return (
<View><Text>{data.time}</Text></View>
)
})
}
_handlePressLap() {
console.log("press lap");
if (!this.state.isRunning) {
this.setState({
laps: []
})
return
}
let laps = this.state.laps.concat([{'time': this.state.timeElapsed}]);
this.setState({
laps: laps
})
console.log(laps);
}
} }
Don't forget to return
the mapped array , like: 不要忘记
return
映射的数组,如:
lapsList() {
return this.state.laps.map((data) => {
return (
<View><Text>{data.time}</Text></View>
)
})
}
Reference for the map()
method: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map map()
方法的参考: https : //developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map
Try moving the lapsList
function out of your class and into your render function: 尝试将
lapsList
函数移出您的类并进入渲染函数:
render() {
const lapsList = this.state.laps.map((data) => {
return (
<View><Text>{data.time}</Text></View>
)
})
return (
<View style={styles.container}>
<View style={styles.footer}>
<View><Text>coucou test</Text></View>
{lapsList}
</View>
</View>
)
}
you forgot the return at the beginning of the function lapsList()
你忘记了函数
lapsList()
开头的返回
lapsList() {
render(
this.state.laps.map((data) => {
return (
<View><Text>{data.time}</Text></View>
);
})
);
}
lapsList() {
return this.state.laps.map((data) => {
return (
<View><Text>{data.time}</Text></View>
)
})
}
You forgot to return the map. 你忘了退回地图。 this code will resolve the issue.
此代码将解决此问题。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.