Данные от рендеринга API как пустые (проблема с массивом/объектом)
У меня есть компоненты, предназначенные для отображения данных из API:
class Item extends Component {
constructor(props) {
super(props);
this.state = {
output: []
}
}
componentDidMount() {
fetch('http://localhost:3005/products/157963')
.then(response => response.json())
.then(data => this.setState({ output: data }));
}
render() {
console.info(this.state.output);
return (
<ItemPanel>
<ItemBox>
<BoxTitle>{this.state.output}</BoxTitle>
</ItemPanel>
);
}
export default Item;
console.info(this.state.output) возвращает правильные данные, в то время как мой компонент не будет отображаться, выдавая эту ошибку:
Objects are not valid as a React child (found: object with keys {id, general, brand, images}). If you meant to render a collection of children, use an array instead.
Я предполагаю, что данные из API являются объектом. Я уже пробовал использовать JSON.parse или toString():/
Давайте попробуем показать бренд здесь, console.info находится выше
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 3
Похоже, вы показываете весь объект в <BoxTitle>, давайте попробуем показать бренд здесь. Я обновил код, указанный в вопросе.
Обновлено начальное состояние output [] до {}
class Item extends Component {
constructor(props) {
super(props);
this.state = {
output: {}
}
}
componentDidMount() {
fetch('http://localhost:3005/products/157963')
.then(response => response.json())
.then(data => this.setState({ output: data }));
}
render() {
console.info(this.state.output);
const { brand = {name : ""} } = this.state.output // added default name until we get actual value
return (
<ItemPanel>
<ItemBox>
<BoxTitle>{brand.name}</BoxTitle>
</ItemPanel>
);
}
export default Item;
Здесь требовалось небольшое исправление: { brand = {name = ""} } -> { brand = {name: ""} }, и теперь оно работает. Большое спасибо!
<ItemBox> не закрыто должно быть <ItemBox/>Сейчас я изо всех сил пытаюсь получить доступ к изображениям из этого API, пробовал const {images = {primary:""} } = this.state.output; и несколько вариантов, но все еще не могу загрузить изображение src. Помощь приветствуется
попробуй это, const { brand = {name : ""} , images: {primary: {...}} = this.state.output
Когда ваш компонент получает данные из вашего API, он отображает дерево элементов, описанное в функции рендеринга.
Начальное состояние для output — пустой массив, и это хорошее начало.
Вы должны подумать, что отображать пользователю вашего приложения при загрузке данных из API или в случае сбоя сетевого запроса.
Я совершенно уверен, что вы не хотите отображать объект, возвращаемый после успешного вызова API, как есть.
Тем не менее, функцию JSON.stringify можно использовать для просмотра того, какой результат установлен в состоянии после успешного вызова API, прежде чем выбирать, какие поля будут отображаться, как и где они будут отображаться.
вы можете лучше использовать условный рендеринг,
render() {
console.info(this.state.output);
return (
<ItemPanel>
<ItemBox>
{
if (this.state.output.brand.name !=== null) ?
<BoxTitle>{this.state.output.brand.name}</BoxTitle> :
<BoxTitle>Brand Name is Empty</BoxTitle>
}
</ItemPanel>
);
}
можете поделиться, что
this.state.outputон утешает? что именно вы хотите показать в<BoxTitle>изid, general, brand, images?