간단하고 알기 쉬운 React 마법(18): 어떻게 응용을 수정하여 세 가지 데이터를 처리합니까

자, 나는 네가 시간을 들여 스스로 이 임무를 완수해 보길 바란다. 왜냐하면 그는 정말 지식을 공고히 하는 데 매우 유용하기 때문이다.못 만들어도 괜찮아. 내가 다 써주겠다고 약속했으니까 다음에 코드를 띄워줘.
우선 세 가지 데이터를 저장하기 위해 구성 요소의 초기 상태를 업데이트하는 것입니다:commit, fork,pulls.그것은 현재 표시된 데이터가 무엇인지 구분하기 위해 값을 더 필요로 한다.코드는 다음과 같습니다. src/pages/Detail.js

this.state = {
    mode: 'commits',
    commits: [],
    forks: [],
    pulls: []
};

두 번째는 API를 세 번 호출할 수 있도록 component Will Mount () 를 업데이트하는 것입니다.우리는 단지 세 번뿐이다.걱정하지 마세요. 우리는 곧 이곳을 개선할 것입니다.이것은 새 componentWillMount() 방법입니다.
src/pages/Detail.js

componentWillMount() {
    ajax.get('https://api.github.com/repos/facebook/react/commits')
        .end((error, response) => {
            if (!error && response) {
                this.setState({ commits: response.body });
            } else {
                console.log('Error fetching commits', error);
            }
        }
    );

    ajax.get('https://api.github.com/repos/facebook/react/forks')
        .end((error, response) => {
            if (!error && response) {
                this.setState({ forks: response.body });
            } else {
                console.log('Error fetching forks', error);
            }
        }
    );

    ajax.get('https://api.github.com/repos/facebook/react/pulls')
        .end((error, response) => {
            if (!error && response) {
                this.setState({ pulls: response.body });
            } else {
                console.log('Error fetching pulls', error);
            }
        }
    );
}

다음에 관련 정보를 표시하기 위해 세 가지render 방법이 필요합니다.내 이름은 renderCommits(), renderForks() 및 renderPulls()입니다.
src/pages/Detail.js

renderCommits() {
    return this.state.commits.map((commit, index) => {
        const author = commit.author ? commit.author.login : 'Anonymous';

        return (

            {author}:
            {commit.commit.message}.
        
);
    });
}

renderForks() {
    return this.state.forks.map((fork, index) => {
        const owner = fork.owner ? fork.owner.login : 'Anonymous';

        return (

            {owner}: forked to
            {fork.html_url} at {fork.created_at}.
        
);
    });
}

renderPulls() {
    return this.state.pulls.map((pull, index) => {
        const user = pull.user ? pull.user.login : 'Anonymous';

        return (

            {user}:
            {pull.body}.
        
);
    });
}

주의: "fork to"와 같은 줄에 링크할 수 있도록renderForks () 방법을 조정해야 할 수도 있습니다. 그렇지 않으면 React가 단어 사이에 빈칸을 남기지 않습니다.
이렇게 하면 매번 렌더링을 분리할 수 있습니다. 이것은 렌더링 () 으로 하여금 어느 것을 표시할지 선택하기만 하면 된다는 것을 의미합니다.state의 모델 값을 사용하여 표시할 값을 결정합니다. 이것은 세 가지 값이 있습니다.'commits,'forks','pulls' 입니다.
이 점을 감안하여 다음에render()를 제시한다.src/pages/Detail.js

render() {
    let content;

    if (this.state.mode === 'commits') {
        content = this.renderCommits();
    } else if (this.state.mode === 'forks') {
        content = this.renderForks();
    } else {
        content = this.renderPulls();
    }

    return (

        Show Commits
        Show Forks
        Show Pulls
        {content}
    
);
}

방법의 끝에 세 개의 단추를 볼 수 있습니다. 단추가 눌렸을 때 정의되지 않은 세 가지 방법을 사용합니다: show Commits (), show Forks (), show Pulls ().이러한 메서드의 기능은 모드 상태를 변경하는 것입니다.
src/pages/Detail.js

showCommits() {
    this.setState({ mode: 'commits' });
}

showForks() {
    this.setState({ mode: 'forks' });
}

showPulls() {
    this.setState({ mode: 'pulls' });
}

구성 요소state나props를 변경하면 자동으로 구성 요소를 다시 렌더링합니다. 즉, 클릭하면 우리가 원하는 효과를 얻을 수 있습니다.계속하기 전에 완전한Detail을 드리겠습니다.js, 너는 나의 것보다 네가 부족한 것을 볼 수 있다.
src/pages/Detail.js

import React from 'react';
import ajax from 'superagent';

class Detail extends React.Component {
    constructor(props) {
        super(props);

        this.state = {
            mode: 'commits',
            commits: [],
            forks: [],
            pulls: []
        };
    }

    componentWillMount() {
        ajax.get('https://api.github.com/repos/facebook/react/commits')
            .end((error, response) => {
                if (!error && response) {
                    this.setState({ commits: response.body });
                } else {
                    console.log('Error fetching commits', error);
                }
            }
        );

        ajax.get('https://api.github.com/repos/facebook/react/forks')
            .end((error, response) => {
                if (!error && response) {
                    this.setState({ forks: response.body });
                } else {
                    console.log('Error fetching forks', error);
                }
            }
        );

        ajax.get('https://api.github.com/repos/facebook/react/pulls')
            .end((error, response) => {
                if (!error && response) {
                    this.setState({ pulls: response.body });
                } else {
                    console.log('Error fetching pulls', error);
                }
            }
        );
    }

    showCommits() {
        this.setState({ mode: 'commits' });
    }

    showForks() {
        this.setState({ mode: 'forks' });
    }

    showPulls() {
        this.setState({ mode: 'pulls' });
    }

    renderCommits() {
        return this.state.commits.map((commit, index) => {
            const author = commit.author ? commit.author.login : 'Anonymous';

            return (

                {author}:
                {commit.commit.message}.
            
);
        });
    }

    renderForks() {
        return this.state.forks.map((fork, index) => {
            const owner = fork.owner ? fork.owner.login : 'Anonymous';

            return (

                {owner}: forked to
                {fork.html_url} at {fork.created_at}.
            
);
        });
    }

    renderPulls() {
        return this.state.pulls.map((pull, index) => {
            const user = pull.user ? pull.user.login : 'Anonymous';

            return (

                {user}:
                {pull.body}.
            
);
        });
    }

    render() {
        let content;

        if (this.state.mode === 'commits') {
            content = this.renderCommits();
        } else if (this.state.mode === 'forks') {
            content = this.renderForks();
        } else {
            content = this.renderPulls();
        }

        return (

            Show Commits
            Show Forks
            Show Pulls
            {content}
        
);
    }
}

export default Detail;

보시다시피 특별히 재미있는 점은 없습니다. 단지 우리가 이미 쓴 것을 세 번 반복할 뿐입니다.