javascript - 在 redux/react 应用程序的页面之间导航时图像被复制

Question

我正在创建一个用于学习目的的 react/redux 应用程序。我正试图通过他们的 api 从 contentful 中提取图像。我已经设置了一个可以很好地显示图像的 Action 、reducer 和组件，但是在页面之间导航时图像会重复。每次我返回同一页面时，图像都会重复 + 1，因此如果我访问该页面五次，该图像将在该页面上存在 5 次。

如果有人能给我一些关于如何调试这个甚至问题的解决方案的指示，那就太好了。

行动

export function fetchAsset(id) {
  const request = axios.get(`${API_BASE_URL}/spaces/${API_SPACE_ID}/assets/${id}?access_token=${API_TOKEN}`);
  return {
    type: FETCH_ASSET,
    payload: request
  };
}

reducer

import { FETCH_ASSET } from '../actions/index';
const EMPTY_ARRAY = []

export default function(state = EMPTY_ARRAY, action) {
  switch(action.type) {
  case FETCH_ASSET:
    return [ ...state, action.payload.data];
  default:
    return state;
  }
}

Assets 组件

import React, { Component } from 'react';
import { connect } from 'react-redux';
import { fetchAsset } from '../actions/index';
import styled, { css } from 'styled-components';


const RespImg = styled.img`
    width: 100%;
`


class Asset extends Component {
  componentWillMount() {
    this.props.fetchAsset(this.props.assetId)
  }
  shouldComponentUpdate(nextProps, nextState) {
    return true;
  }

  renderAsset() {
    var assetArray = this.props.assets;

    console.log(assetArray + ' this.props')
    return assetArray.map((asset, index) => {
      if (asset.sys.id == this.props.assetId) {
        return (
          <RespImg src={asset.fields.file.url} alt={asset.fields.file.fileName} key={index}/>
        );
      }
    });
  }
  render() {
    return (
      <div className="asset">
        {this.renderAsset()}
      </div>
    );
  }
}

function mapStateToProps(state) {
  return {
    assets: state.assets
  };
}

export default connect(mapStateToProps, { fetchAsset })(Asset)

将组件添加到页面

<Asset assetId={work.fields.featuredImage.sys.id} assetKey={index} />

Answer 1

我相信这里的问题是你多次获取这张图片，这就是为什么它在第一次渲染时一切都很好。

您将图像保存在数组中，也许您下载相同的 Assets 并将其添加到数组中，即使它可能已经存在于数组中。对于此类实体，称为 normalizing 的技术可以使用，因此您的状态将如下所示:

state = {
   [id]: Asset
};

使用这种技术，您可以通过 id 获取所需的 Assets (您可能从 URL 参数中获得它)。reducer 中的数组通常用于集合——例如，如果你想获取所有 Assets 。您可以规范化响应，并在一个 reducer 中按 id 保存实体，在另一个 reducer 中保存收集请求的结果——因此您将拥有一个包含 id 的数组，以及一个包含所有可能 Assets 的对象。

---

还有一件事 – @Dyo 建议您将一些东西放入 key，例如 id 或 url，这是一个很好的建议。但是，如果您打开控制台，您可能会看到一些关于 具有相同键的元素 的信息。基本上，React 不会渲染具有相同键的元素，因此可能渲染了相同实体的数组，但 React 只渲染了一个——所有其他的都被丢弃了。