React-native AJAX и API - рендеринг данных JSON
Я действительно новичок в реакции. Мой вопрос в том, как выполнить итерацию компонента и отобразить данные json. Вот мой код:
import React from 'react';
import { ScrollView, StyleSheet, Text, View } from 'react-native';
import { Divider } from 'react-native-elements';
import { limitUI04 } from 'uuid-js';
export default class SearchProperty extends React.Component {
constructor(props) {
super(props);
this.state = {
error: null,
isLoaded: false,
items: []
}
}
componentDidMount() {
fetch("myapiendpoint", {
method: 'POST',
headers: {
'Accept': 'application/json',
'Content-Type': 'application/json',
},
})
.then(res => res.json())
.then(
(result) => {
this.setState({
isLoaded: true,
items: result.data
});
},
(error) => {
this.setState({
isLoaded: true,
error
});
}
)
}
render() {
const { error, isLoaded, items } = this.state;
{
items.map(key => {
return (
<Text>
{key.id}
</Text>
)
})
}
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#fff',
alignItems: 'center',
justifyContent: 'center',
},
});
Мой код выше возвращает ошибку:
Invariant Violation: Invariant Violation: SearchProperty(...): Nothing was returned from render. This usually means a return statement is missing. Or, to render nothing, return null.
Пожалуйста помоги
Мое возвращение там, внутри метода карты. @BensSteves
В моем коде я сделал метод componentDidMount (), будет ли этот метод выполняться автоматически? @BensSteves
да, ваш компонентDidMount будет выполняться автоматически. Оператор return в функции карты предназначен только для функции карты. Это оператор возврата для этой функции. Но для реакции требуется оператор return после вашего render () {... Если вы его не укажете, response не имеет ни малейшего понятия, что делать и как интерпретировать вашу функцию карты.
вы можете поискать методы жизненного цикла на веб-сайте документации React, чтобы лучше понять каждый из них. Вот ссылка: reactjs.org/docs/…
Ответы 1
Вам не хватает инструкции возврата после render
render() {
const { error, isLoaded, items } = this.state;
return (
<div>
{
items.map(key => {
return (
<Text key = {key.id}>
{key.id}
</Text>
)
})
}
</div>
}
)
}
это должно быть хорошо.
Примечание: помните, когда вы сопоставляете что-либо, самый внешний элемент или ваш корневой элемент в операторе return функции сопоставления должен включает уникальный ключ. Поскольку я предполагаю, что ваш key.id уникален, вы можете использовать его как свой уникальный ключ.
Обновленный ответ:
import React, { Component } from "react";
import logo from "./logo.svg";
import "./App.css";
class App extends Component {
state = {
error: null,
isLoaded: false,
items: [
{ id: 1, name: "Apples", price: "$2" },
{ id: 2, name: "Peaches", price: "$5" }
]
};
componentWillMount() {
this.setState({ items: [...this.state.items, { id: 3 }] }, () => {
this.displayItems(this.state.items);
});
}
displayItems = items => {
console.info(items);
return items.map(key => {
return <div key = {key.id}>{key.id}</div>;
});
};
render() {
const { items } = this.state;
return <div>{this.displayItems(items)}</div>;
}
}
export default App;
Я изменил didMount на WillMount (). WillMount () будет монтироваться (каламбур не предназначен) до того, как что-либо будет отрисовано. Затем компонент отобразит функцию карты. Так что состояние обновлено. Я отправил элементы из WillMount () в новую функцию displayItems для дополнительной уверенности в том, что состояние будет обновляться. Надеюсь это поможет.
Обновлено: ВНИМАНИЕ
Я использовал здесь WillMount (), но не включил UNSAFE. componentWillMount() больше не будет работать после версии 17. Вы можете использовать UNSAFE_componentWillMount(). Это будет работать в версии 17. Извините за это (я привык просто выбирать это из IntelliSense).
квадратная скобка прямо внутри внешнего оператора возврата вызывает ошибку
ах да спасибо. Вам нужен корневой элемент div или корневой элемент в каждом операторе возврата. Извини за это.
у вас не может быть более одного корневого элемента. так что смотрите div ... у вас может быть только один внешний div, у вас не может быть смежных div, таких как <div> ... map function </div> <div> </div>. Это ответ "нет-нет". вы получите ошибку синтаксического анализа, не может быть смежных элементов jsx. или элементы jsx должны быть заключены во включающий тег. заметьте, я просто использую div в качестве примера, это может быть любой элемент.
Хм, теперь у меня новая ошибка. Объект "Мои предметы" не определен. Можете ли вы снова понять, что не так?
где вы разместили свои предметы? или где вы определили пункты? не часть const {items} = this.state, а где в исходном коде вы фактически присвоили элементам значение
внутри componentDidMount (). Сразу после получения ответа ajax я вызываю метод setState
Позвольте нам продолжить обсуждение в чате.
вам не хватает декларации о возврате ...