React/Redux 调用一排卡片

Posted 2023-02-22

【中文标题】React/Redux 调用一排卡片

【英文标题】：React/Redux calls for a row of cards

【发布时间】：2018-08-15 03:56:47

【问题描述】：

我正在创建一排 10 张卡片。每张卡都需要调用自己的 API 来获取演绎 url。我将如何使用 React/Redux 实现这一目标？

下面是我的 React Card 组件。我循环这个组件 10 次，每次都使用不同的cardId，卡片用来调用 API 来获取图像 url。

import React, Component from 'react';
import connect from 'react-redux';
import fetchRendition from '../../../actions/RenditionAction';


class Card extends Component 

    componentDidMount() 
      // action call to fetch rendition for card
      this.props.fetchRendition(this.props.cardId);
    


    render() 
       return (
          <div className='card'>
             <div className='card-image-container'>
                <div className='card-image' style = backgroundImage: `url($this.props.rendition.url)`/>
            </div>
         </div>
      );
    


function mapStateToProps(state) 
  return rendition: state.card 


export default connect(mapStateToProps, fetchRendition)(Card);

循环通过此卡片组件如下所示：

import React, Component from 'react';

 class RowOfCards extends Component 

    render() 
      const ArrayOfIds = ['id1', 'id2', 'id3', 'id4','id5', 'id6', 'id7', 'id8'. 'id9', 'id10']
      return ArrayOfIds.map((id) => <Card cardId = id/>))
   


export default RowOfCards;

现在，通过此实现，所有 10 张卡片最终都具有相同的图像。预期的行为是每张卡片应该有不同的图像。在每张卡片调用 API 后，如何让卡片更新为自己的图像？

【问题讨论】：

渲染所有 10 张卡片的循环代码在哪里？你也可以添加吗？

@mindaJalaj 我更新了一个循环的例子

你也可以分享 fetchRendition 的代码吗？到目前为止，您提到的任何内容似乎都是正确的，对于每个 cardid fetchRendition，现在您存储此响应的方式很重要

【参考方案1】：

您似乎正在用更新的图像替换reducer 中获取的图像，并且由于您的reducer 中只有一个rendition 图像，因此所有卡都使用相同的图像。

对于您的用例，似乎不需要redux，您需要将图像存储在Card组件状态，除了Card组件之外没有人知道自己的图像。

export default class Card extends Component 
    state = 
      rendition: 
    
    componentDidMount() 
      // action call to fetch rendition for card
      fetchRendition(this.props.cardId).then((res) =>   // make an api call and store the response in state and not in redux store
        this.setState(rendition: res)
      );
    


    render() 
       return (
          <div className='card'>
             <div className='card-image-container'>
                <div className='card-image' style = backgroundImage: `url($this.state.rendition.url)`/>
            </div>
         </div>
      );
    

Redux 的作者@dan_abramov，在You might not need redux 上写了一篇文章。请看一下

【讨论】：

很高兴它有帮助，请仔细阅读@dan_abramov 的文章。

【参考方案2】：

根据您的代码，您似乎只在减速器中存储了一个“卡片”对象。您应该将其存储为“卡片”对象的数组。

我假设你的减速器看起来像这样

const card = (state = null, action) => 
  switch(action.type) 
    case 'STORE_CARD':
      return 
        action.payload.data
      ,
    ...
  

如果上述情况属实，每个动作都会覆盖卡片对象。相反，将卡片对象数据存储为以 cardId 作为键的对象列表，如下所示：

const cards = (state = null, action) => 
  switch(action.type) 
    case 'STORE_CARDS':
      return 
        ...state,
        [action.payload.data.cardId]: action.payload.data
      ,
    ...
  

然后，在你的组件中：

render() 
   return (
      <div className='card'>
         <div className='card-image-container'>
            <div className='card-image' style = backgroundImage: `url($this.props.rendition[this.props.cardId].url)`/>
        </div>
     </div>
  );