Попытка назначить свойство только для чтения | React-Native

Я пытаюсь преобразовать приложение React, которое я создал в React, в React Native. У меня есть событие onPress, связанное с компонентом, который извлекает данные через Axios, setState с этими данными, а затем сопоставляет его с компонентом, который обрабатывает макет данных, довольно просто. Однако я получаю ошибку Attempted to assign to readonly property, и она очень расплывчата, я не знаю, где что-то идет не так. Даже если бы я мог просто понять, что вообще означает этот стек ошибок, было бы полезно, заранее спасибо! <3

import React, { Component } from "react";
    import axios from "axios";
    import NewSongLayout from "./NewSongLayout";
    export default class NewSongData extends Component {
      state = {
        songData: []
      };
      async componentWillMount() {
        try {
          const songList = await axios.get(
            "https://beatsaver.com/api/songs/new/{start?"
          );
          this.setState({
            songData: songList.data.songs
          });
          console.info(this.state.songData);
        } catch (error) {
          console.info(error);
        }
      }
      render() {
        return (
          <>
            {this.state.songData.map(song => (
              <NewSongLayout key = {song.id} song = {song} />
            ))}
          </>
        );
      }
    }

Попытка назначить свойство только для чтения | React-Native Событие onPress:

import React, { Component } from "react";
import { Text, View, StyleSheet, Button } from "react-native";
import NewSongData from "../Components/NewSongData";

const styles = StyleSheet.create({
  container: {
    display: "flex",
    backgroundColor: "black",
    height: "100%",
    width: "100%"
  },
  text: {
    fontFamily: "Bangers",
    fontSize: 50,
    color: "white",
    textAlign: "center"
  }
});

export default class Landing extends Component {
  render() {
    return (
      <View style = {styles.container}>
        <Text style = {styles.text}>Beat Saber Companion</Text>
        <Button title = "Newest Maps" onPress = {NewSongData} />
      </View>
    );
  }
}

В вашем componentWillMount вы не назначаете переменную songData, которую затем используете в своем console.info. Я думаю, что эта строка должна быть console.info(this.state.songData);. Вы должны вставить свой код, а не использовать его изображение.

Andrew 18.12.2018 20:48

Пустые угловые скобки - это просто код-заполнитель или фактический код. Не могли бы вы также поделиться частью кода onPress?

agenthunt 18.12.2018 21:29

Пустые скобки являются эквивалентом React Native фрагментам React, они там излишне.

Christian Baldwin 18.12.2018 21:30
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
2
3
3 325
2

Ответы 2

Согласно это:

componentWillMount() is invoked immediately before mounting occurs. It is called before render(), therefore setting state in this method will not trigger a re-rendering. Avoid introducing any side-effects or subscriptions in this method.

Вместо этого вы должны запустить запрос axios из метода жизненного цикла componentDidMount:

componentDidMount() {
    try {
      const songList = await axios.get(
        "https://beatsaver.com/api/songs/new/{start?"
      );
      this.setState({
        songData: songList.data.songs
      });
      console.info(this.state.songData);
    } catch (error) {
      console.info(error);
    }
  }

После использования constructor () при объявлении состояния ошибка изменилась на «undefined не является объектом (оценка '_this.state = {songData: []}')»

Christian Baldwin 18.12.2018 21:34

Я использовал npm в основном в своем проекте и случайно выполнил команду пряжи. Погрузившись глубже, я заметил два файла блокировки. Удаление yarn-lock.json помогло мне.

Другие вопросы по теме