Блог

Я новичок в использовании React, и я не уверен, какая наилучшая практика или правильный способ отображения данных.

Должен ли я всегда стремиться разбивать вещи, которые потенциально могут быть их собственным компонентом, на более мелкие компоненты, вместо того, чтобы отображать один большой компонент? Я предполагаю, что да. Я просто не знаю, когда.

В любом случае, у меня есть следующий компонент, который отправляет запрос на выборку в api. Он возвращает некоторые данные. Я устанавливаю состояние для данных. Затем я создаю переменную coins, которая преобразует данные в <ul> with <li> . Затем я возвращаю его как <div> содержащий данные как {coins} . Мой вопрос в том, должны ли <ul> и <li> быть созданы как отдельный компонент, который принимает props, который будет состоянием компонента this Coins? Кто-нибудь может помочь мне начать?

 export default class Coins extends React.Component {
    constructor(props) {
        super(props);

        this.state = {
            lists: [],
            error: null,
        };
    }
    //lifecycle method to call loadCoins when Coins component is displayed?
    componentDidMount() {
        this.loadCoins();
    }

    //Data fetch from Coins API
    loadCoins() {
        this.setState({
            error: null,
            loading: true
        });
        return fetch(API_BASE_URL)
        .then(res => {
            if(!res.ok) {
                return Promise.reject(res.statusText);
            }
            return res.json();
        })
        .then(coins => {
            console.log('coins:', coins);
            this.setState({
                lists: coins.Data,
                loading: false
            })
        }
        )
        .catch(err => {
            this.setState({
                error: 'Could not load coins',
                loading: false
            })
        });
    }

    //Map the fetch data into individual cards/uls as JSX
    render() {
        const coins = this.state.lists.map((coin, index) => {
            return <ul className='coin-containers' key={coin.CoinInfo.Id}>
            <li><img className='coinImages' src={`${API_BASE_IMAGE}${coin.CoinInfo.ImageUrl}`} alt={coin.CoinInfo.FullName}/></li>
            <li>{index 1}</li>
            <li>{coin.CoinInfo.FullName}</li>
            <li className='ticker'>{coin.CoinInfo.Name}</li>
            <li>{coin.DISPLAY.USD.PRICE}</li>
            <li>{coin.DISPLAY.USD.SUPPLY}</li>
            <li>{coin.DISPLAY.USD.MKTCAP}</li>
            <li>24HR</li>
            <li>{coin.DISPLAY.USD.CHANGEPCT24HOUR}%</li>
            </ul>
        });

        //display the new array of mapped coins data
        return (
        <div className='purse'>
            {coins}  
        </div>
        );
    }
}
  

Я бы создал компонент (или функцию, если это кажется более подходящим) для отображения отдельной монеты.

Вы могли бы создать <Coin> компонент и передать ему необходимые данные в качестве реквизитов:

 render() {
  return (
    <div className='purse'>
      {this.state.lists.map((coin, index) => <Coin data={coin} index={index} key={coin.CoinInfo.Id} />)}
    </div>
  );
}
  

Или просто переместить рендеринг монеты в новую функцию:

 renderCoin(coin, index) {
  return <ul className='coin-containers' key={coin.CoinInfo.Id}>
    <li><img className='coinImages' src={`${API_BASE_IMAGE}${coin.CoinInfo.ImageUrl}`} alt={coin.CoinInfo.FullName}/>
    </li>
    <li>{index   1}</li>
    <li>{coin.CoinInfo.FullName}</li>
    <li className='ticker'>{coin.CoinInfo.Name}</li>
    <li>{coin.DISPLAY.USD.PRICE}</li>
    <li>{coin.DISPLAY.USD.SUPPLY}</li>
    <li>{coin.DISPLAY.USD.MKTCAP}</li>
    <li>24HR</li>
    <li>{coin.DISPLAY.USD.CHANGEPCT24HOUR}%</li>
  </ul>;
}
render() {
  return (
    <div className='purse'>
      {this.state.lists.map((coin, index) => this.renderCoin(coin, index))}
    </div>
  );
}