Я пытаюсь преобразовать приложение 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} />
))}
</>
);
}
}
Событие 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>
);
}
}
Пустые угловые скобки - это просто код-заполнитель или фактический код. Не могли бы вы также поделиться частью кода onPress?
Пустые скобки являются эквивалентом React Native фрагментам React, они там излишне.



![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)


Согласно это:
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: []}')»
Я использовал npm в основном в своем проекте и случайно выполнил команду пряжи. Погрузившись глубже, я заметил два файла блокировки. Удаление yarn-lock.json помогло мне.
В вашем componentWillMount вы не назначаете переменную
songData, которую затем используете в своем console.info. Я думаю, что эта строка должна бытьconsole.info(this.state.songData);. Вы должны вставить свой код, а не использовать его изображение.