Является ли это правильным способом отображения данных в React из запроса выборки, если нет, то как мне изменить отображение JSX на компонент?

Question

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

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

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

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>
        );
    }
}

Answer 1

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

Вы можете создать компонент <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>
  );
}