Как предотвратить повторение компонента с помощью array map () в react-native

Question

Я реализую календарь в react native с expo, проблема в том, что когда я хочу вывести дату из базы данных firebase, чтобы нарисовать ее в календаре, она повторяется несколько раз, вот изображение

Просмотр изображения

Код такой:

  constructor(props) {
    super(props);

    this.state = {
      selected: "",
      usuarios: [],
    };
  }

  componentDidMount() {
    firebase
      .database()
      .ref("DatosCli/")
      .on("child_added", (data) => {
        var datos = data.val();
        var usuariosTemp = this.state.usuarios;
        datos.key = data.key;
        usuariosTemp.push(datos);
        this.setState({ usuarios: usuariosTemp });
      });
  }

  cargarDatos = async () => {
    var userTemp = new Array();
    var data = await firebase.database().ref("/DatosCli").once("value");

    data.forEach((child) => {
      var user = child.val();
      user.key = child.key;
      userTemp.push(user);
    });
    this.setState({ usuarios: userTemp });
  };

 

  render() {

    return (
      <View style={styles.container}>

        {this.state.usuarios.map((usuarioTemp) => (
          <CalendarList
            markedDates={{
              [usuarioTemp.date]: {
                selected: true,
                disableTouchEvent: true,
                selectedColor: "orange",
                selectedTextColor: "red",
              },
            }}
          />
        ))}
        
      
      </View>
    );
  }
}

Я знаю, что наличие map() вне CalendarList является причиной того, что он повторяется несколько раз, как бы это было тогда решено?

Я использую библиотеку календаря: https://github.com/wix/react-native-calendars

Answer 1

Вы хотите иметь список отмеченных дат, а не список CalendarList компонентов. Прямо сейчас вы просматриваете даты и создаете новый CalendarList для каждой из ваших дат. Вместо этого вы хотите создать объект дат. Map является частью прототипа массива. Однако для свойства markedDate, похоже, требуется объект. Для этого нам нужно немного реорганизовать ваш код и заменить map на forEach, например, для создания объекта.

Давайте разделим эту проблему на два этапа. Сначала мы создаем объект markedDates с помощью функции forEach, а затем передаем его как опору в CalendarList.

render() {
    const markedDates = {};
    this.state.usuarios.forEach((usuarioTemp) => {
        markedDates[usuarioTemp.date] = {
            selected: true,
            disableTouchEvent: true,
            selectedColor: "orange",
            selectedTextColor: "red",
         };
    };
    return (
      <View style={styles.container}>
          <CalendarList markedDates={markedDates} />
      </View>
    );
  }