Почему я могу использовать this.state без необходимости связывать или использовать функцию стрелки React - PullRequest
0 голосов
/ 02 марта 2019

Я знаю, что функции стрелок наследуют контекст родителя, поэтому они так полезны в React.Тем не менее, у меня есть этот компонент React:

import React, { Component } from 'react';
import { View, Text } from 'react-native';
import axios from 'axios';


class AlbumList extends Component {
    constructor(props) {
        super(props);
        this.state = {
            albums: [],

        };

        axios.get('https://rallycoding.herokuapp.com/api/music_albums')
            .then(response => {
                 this.setState({ albums: response.data });
            });
    }


    renderAlbums() {
        const { albums } = this.state;
        const array = albums.map(album => (
                <Text>{album.title}</Text>
            ));

        return array;
    }


    render() {
        return (
            <View>
                { this.renderAlbums() }
            </View>
        );
    }
}

export default AlbumList;

И { this.renderAlbums() } работает нормально, и мне не нужно преобразовывать renderAlbums() в функцию стрелки.Я читал другие ответы на stackoverflow, но все они упоминают, что вам нужна функция стрелки или bind, чтобы this работал правильно.Но в моем случае все работает нормально, так зачем использовать функцию стрелки внутри класса es6?

Ответы [ 2 ]

0 голосов
/ 02 марта 2019

Просто функции стрелок наследуют this от области видимости своих родителей, но обычные функции наследуют this от того места, где функция вызывается

0 голосов
/ 02 марта 2019

Если вы используете функции со стрелками, то, что это «это», определяется блоком, в котором определена функция. Если вы используете «нормальные» функции, тогда «это» определяется местом, где вызывается функцияот.В этом случае вы вызываете его из метода рендеринга, поэтому «this» все еще является экземпляром компонента.Если вы попытаетесь вызвать подобную функцию из чего-то наподобие кнопки onClick, она не сможет найти «setState», так как «this» в основном будет определяться фактической отрисованной кнопкой, а не классом реакции.

...