这是从获取请求中在React中显示数据的正确方法，如果不是，我如何更改呈现给组件的JSX？

Question

我是使用React的新手，我不确定显示数据的最佳实践或正确方法是什么。

我是否应该一直在将可能是其自身组件的事物分解为较小的组件，而不是渲染一个大的组件？ 我假设是的。 我只是不知道什么时候。

无论如何，我有以下组件向api进行提取请求。 它返回一些数据。 我将状态设置为数据。 然后，我创建一个可变硬币，该硬币将数据与<li>映射到<ul> <li> 。 然后，我将其作为<div>返回，其中包含数据为{coins} 。 我的问题是，是否应该将<ul>和<li>创建为一个单独的组件，该组件需要道具，这将是该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>
        );
    }
}

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