В файле React.js массив не проходит должным образом через реквизиты?

Question

У меня есть приложение для реагирования, у которого есть два компонента один Клиент, а другой - теги. Клиент отправляет значение своего тега в теги. В следующем:

Customer.jsx

import React from "react"; 
import Tags from "./Tags.jsx"; 

export default class Customer extends React.Component { 
    constructor(props) { 
    super(props); 
    this.state = {customer:''}; 
    } 
    componentDidMount(){ 
    const url = `http://localhost:3000/api/customers/${this.props.params.id}` 
    fetch(url) 
     .then(res=>res.json()) 
     .then(data=>{ 
     console.log(data); 
     this.setState({ 
      customer: data 
     }); 
     }) 
     .catch(error=>{ 
     console.log(error) 
     }); 
    } 
    render() { 
    return (
     <div> 
      Company Name :{this.state.customer.companyName} 
      Customer Name :{this.state.customer.name} 
      Tags: <Tags tags={this.state.customer.tags} /> 
     </div> 
    ); 
    } 
} 

Tags.jsx

import React from "react"; 

export default class Tags extends React.Component { 
    constructor(props) { 
    super(props); 
    } 
    render() { 
    let tags = this.props.tags.map(tag=>{ 
     return (<span>tag</span>); 
    }); 
    return (
     <div> 
     {tags} 
     </div> 
    ); 
    } 
} 

Когда я запускаю код, я получаю "Ошибка типа: Не удается прочитать свойство 'карты' не определено (...)" , Если я заменяю ниже от Tags.jsx

let tags = this.props.tags.map(tag=>{ 
      return (<span>tag</span>); 
     }); 

с

console.log(this.props.tags); 

Выходной массив. Что происходит? Я действительно не понимаю. Что я могу сделать?

Answer 1

В конструкторе Customer вы определяете состояние customer как строку, а не объект. Вы должны изменить его, чтобы отразить фактические свойства клиента, то есть:

this.state = {customer: {name: '', tags: []}}; 

Answer 2

Это не определено, поскольку вы вызываете вызов API, и данные еще не возвращены.

В вашем Customer компоненте вы можете проверить соответствие this.state.customer.tags, а если есть - то визуализировать метки.

Somethling так:

{ this.state.customer.tags ? <Tags tags={this.state.customer.tags} /> : null }