Как исправить отображение состояний, которое не является функцией в React Native?
В настоящее время я изучаю React Native и исследую процесс рендеринга данных api в виде списка. Прямо сейчас у меня уже есть данные api, когда я попытался сопоставить массив, который он говорит.
TypeError: this.state.readings.map is not a function. (In 'this.state.readings.map(function (value) { return console.info(value); })', 'this.state.readings.map' is undefined)
Вот пример API:
Внутри моего ComponentDidMount:
componentDidMount() {
fetch('http://myip:3000/api/readings/3')
.then(response => response.json())
.then(data => this.setState({readings:JSON.stringify(data)}))
}
Мое состояние:
this.state = {
readings:[],
}
Мой рендер:
render() {
console.info(this.state.readings);
return (
{
this.state.readings.map(value => {
return (
console.info(value)
)
})
}
)
}
Ответы 2
Я знаю, что здесь используется функциональный компонент, но поведение будет таким же.
https://snack.expo.io/I0VJsF1z5
Проблема может быть в этой строчке
.then(data => this.setState({readings:JSON.stringify(data)}))
@Mohammed Я использую для этого react native. Я уже пробовал вашу работу, однако в ней говорится, что текстовые строки должны отображаться в компоненте <Text>.
Вы правы, я упустил этот момент. попробуйте это с помощью <Text>, и давайте посмотрим, работает ли это
@Mohammed говорит, что ошибка: текстовые строки должны отображаться в компоненте <Text>. не изменить
Отредактировано, если вы можете поделиться своим кодом в этом приложении, это будет полезно snake.expo.io
позвольте мне примерить это.
Обновлен пример с массивом, который вы отправили в другом комментарии.
@ Мохаммед да вот и обновлено.
Ваша проблема может быть из-за этой строки .then(data => this.setState({readings:JSON.stringify(data)})) , убедитесь, что она возвращает массив
Да, вопрос: он говорит, что после того, как я изменил код, он показывает другую ошибку, что текстовые строки должны отображаться в компоненте <Text>?
РЕДАКТИРОВАТЬ
Если значение this.state.readings равно [{"id":1,"AccountNo":"011-001","ConsName":"Jenny Fox.","Address":"Pacific Triad Road."}].
Тогда этот код должен работать.
И поскольку ваши данные загружаются асинхронно. Вы можете добавить проверку this.state.readings перед его отображением.
export default class App extends React.Component {
constructor(props) {
super(props);
this.state = {
readings: [
{
id: 1,
AccountNo: "011-001",
ConsName: "Jenny Fox.",
Address: "Pacific Triad Road."
}
]
};
}
render() {
return (
this.state.readings.length &&
this.state.readings.map((value) => {
console.info(value);
return <div>{value.Address}</div>;
})
);
}
}
ссылка: https://codesandbox.io/s/ancient-cdn-5695m?file=/src/App.js:51-484
Это не работает.
@DevGe Что вы хотите вернуть с карты?
Не могли бы вы показать результат для вашего this.state.reading?
да, я хочу вернуть все данные в списке, однако у меня возникла ошибка TypeError: this.state.readings.map не является функцией. (В 'this.state.readings.map (function (value) {return console.info (value);})' this.state.readings.map не определен)
[{"id": 1, "AccountNo": "011-001", "ConsName": "Jenny Fox.", "Address": "Pacific Triad Road."}]
Сделал правку ... надеюсь, что это поможет.
Этот код работает ? snake.expo.io/Dm5_RbAe0
Да, вопрос: он говорит, что после того, как я изменил код, он показывает другую ошибку, что текстовые строки должны отображаться в компоненте <Text>? \
Если вы можете добавить свой пример в песочницу кода, это поможет.