Метод визуализации, вызываемый дважды с помощью componentDidMount - React native

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>
    )
}

И элемент списка постоянно увеличивается при каждом рендеринге компонента. Я проверил do c, но не смог найти правильное решение. 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>
  );
}