使用componentDidMount-React native调用了两次Render方法

Question

我正在从firebase实时数据库中获取一些数据。我在构造函数中创建了一个状态，并初始化为一个空数组。稍后在componentDidUpdate方法中，我使用setState方法更新了状态。问题是render方法在组件中调用两次，每次数据都会相乘。

this.state = {
values: [],
}
componentDidMount = () => {
firebase.database().ref('Table').once('value', (data) => {
var input = data.val();
this.setState({ values: input })
})
}

以及渲染方法：

var val = []; //global variable declared before class declaration
render() {
{
this.state.values.map(item => {
val.push(
<List>
<ListItem>
<Text>{item["value"]}</Text>
</ListItem>
</List>
)
})  
}
return(
<View>
{val}
</View>
)
}

每次组件渲染时，列表项都会不断增加。我看过医生，但找不到合适的解决方案。https://reactjs.org/docs/react-component.html#componentdidmount

Answer 1

val在哪里定义？

好的。我定义了一个全局变量。在类声明之前将其声明为数组

这就是复制的来源。

最好这样做：

render() {
const val = this.state.values.map((item, index) => (
<List key={index}>
<ListItem>
<Text>{item.value}</Text>
</ListItem>
</List>
));
return <View>{val}</View>;
}

Answer 2

我不太理解val变量，但这段代码应该适用于您：

mapValues = list => list.map((item, index) => (
<List key={index}>
<ListItem>
<Text>{item.value}</Text>
</ListItem>
</List>
));
render() {
return (
<View>
{this.mapValues(this.state.values)}
</View>
);
}