Доступ к свойству, которое имеет объект как его значение - PullRequest
Новая
       36

Доступ к свойству, которое имеет объект как его значение

0 голосов
/ 15 апреля 2020

Я работаю с API, который извлекает данные из запроса от пользователя. Возвращенные данные выглядят примерно так: 

{
name: "mewtwo"
id: 150
types: Array(1)
     0:
     slot: 1
     type: {
          name: "psychic", url: "https://pokeapi.co/api/v2/type/14"
      }
}

Я хочу получить доступ к значению «psychi c» в типе, но получаю неопределенное значение для «type». Я могу отображать имя свойства и идентификатор просто отлично, я просто не могу получить значение «psychi c». 

const Display = (props) => {
    console.log(props.data.types);
    return (
        <>
            <h1 className="pokemon-name">{props.data.name}</h1>
            <p>{props.data.id}</p>
            <p>{props.data.types.type.name}</p>//Will throw an error here
        </>
    );
}

Ответы [ 2 ]

0 голосов
/ 15 апреля 2020

Поскольку data.types является массивом из объектов , я думаю, что вы хотите получить доступ к первой записи в массиве data.types. Поэтому я бы заменил {props.data.types.type.name} на {props.data.types[0].type.name}.

. В целях безопасности я проверял бы наличие этого массива и извлекал из него данные, прежде чем использовать его следующим образом: 

const Display = ({data}) => {
    // destructure properties out of data prop
    const { name, id, types } = data;
    // extract type name
    const typeName = types[0].name;
    return (
        <>
            <h1 className="pokemon-name">{name}</h1>
            <p>{id}</p>
            <p>{typeName}</p>
        </>
    );
}

Учитывая, что ваши данные поступают из API, реквизит types может не заполняться, когда вы пытаетесь получить к нему доступ. Мы можем объяснить этот сценарий так:

Вот пример компонента-оболочки. этот компонент получает асинхронные данные c и отображает компонент Display. 

// import as you would to make React work.    
class Wrapper extends Component {
    constructor(props) {
        super(props);
        this.state = {
            dataFromApi: false
        }
    }
    componentDidMount() {
        // async function to get data from api (ex: fetch)
        fetchDataFromAPI().then(res => res.json()).then(data => {
            this.setState({ dataFromApi: data })
        });
    }
    render() {
        const { dataFromApi } = this.state;

        return dataFromApi ? 
            (<Display data={dataFromApi}>) : 
            (<span>loading</span>);
    }
}

Надеюсь, это имеет смысл ?.

Cheers?!

0 голосов
/ 15 апреля 2020

Вы пытаетесь получить доступ к элементу массива. Измените его на следующее 

props.data.types[0].type.name


const Display = (props) => {
    let { data } = props;
    return (
        <>
            <h1 className="pokemon-name">{data.name}</h1>
            <p>{data.id}</p>
            <p>{data.types[0].type.name}</p>
        </>
    );
}
...