卡组件无法正常工作

Question

我有一个 React 组件，它显示了在 nextJs 上使用 antd 构建的用户数据和图像列表。反应未按预期运行，所有反应和卡片都是一次性点击而不是单独点击。我想让每个反应和卡片组件都有其独特的点击，而不是一次全部点击。这里还有a link

import React from 'react';
import { Avatar, Card, Icon, List  } from 'antd';

import { ICON_LIST, LIST_TEXTS, STYLES, USER_UPLOAD } from './constants';

const { AVATAR, CARD_CONTAINER, ICON, USER_LIST } = STYLES;
const { INNER, MORE, UPLOAD, VERTICAL } = LIST_TEXTS

class Home extends React.Component {
state = {
    clicks: 0,
};
IncrementIconText = () => {
    this.setState({ clicks: this.state.clicks + 1 });
  }
render() {
    const actions = ( ICON_LIST.map(({ type }) => (
        <span>
            <Icon key={type} type={type} onClick={this.IncrementIconText} style={ICON} />
            {this.state.clicks}
        </span>
    )));
    return (
        <List
        itemLayout={VERTICAL}
        dataSource={USER_UPLOAD}
        renderItem={item => (
            <List.Item style={USER_LIST}>  
                <Card
                    actions={actions}
                    cover={<img alt={UPLOAD} src={item.image} />}
                    extra={<Icon type={MORE} />}
                    hoverable
                    title={<a><Avatar src={item.image} style={AVATAR} />{item.user}</a>}
                    type={INNER}
                    style={CARD_CONTAINER}
                >
                    {item.story}
                </Card>
            </List.Item>
        )}
        />
    );
}
}

export default Home;

constants.js

export const ICON_LIST = [
{
    key: "heart",
    type: "heart",
},
{
    key: "dislike",
    type: "dislike",
},

 {
    key: "meh",
    type: "meh",
},
]

export const LIST_TEXTS = {
INNER: "inner",
MORE: "more",
UPLOAD: "upload",
VERTICAL: "vertical",
};

export const STYLES = {
AVATAR: {
    marginRight: 8
},
CARD_CONTAINER: {
    width: "650px",
    marginBottom: 50
},
ICON: {
    marginRight: 8 
},
USER_LIST: {
    width: "100%",
    display: "flex",
    justifyContent: "center",
    alignItems: "center"
},
};

export const USER_UPLOAD = [
{
    image: "http://sugarweddings.com/files/styles/width-640/public/1.%20The%20Full%20Ankara%20Ball%20Wedding%20Gown%20@therealrhonkefella.PNG",
    story: "Today's my birthday next week! What do you think?",
    user: "Chioma",
},
{
    image: "https://dailymedia.com.ng/wp-content/uploads/2018/10/7915550_img20181007141132_jpeg01c125e1588ffeee95a6f121c35cd378-1.jpg",
    story: "Going for an event. Do you like my outfit",
    user: "Simpcy",
},
{
    image: "https://i0.wp.com/www.od9jastyles.com/wp-content/uploads/2018/01/ankara-styles-ankara-styles-gown-ankara-tops-ankara-gowns-ankara-styles-pictures-latest-ankara-style-2018-latest-ankara-styles-ankara-ankara-styles.png?fit=437%2C544&ssl=1",
    story: "Saturdays are for weddings. Yay or nay!",
    user: "Angela",
},
]

Answer 1

无论您点击哪个图标，您所做的只是递增 "clicks" 的状态并将该状态应用于所有图标。这就是为什么每次点击时所有图标的点击次数都相同的原因。用户可以点击的每个图标都应该有一个不同的 "clicks" 状态计数器。

Answer 2

您几乎已经准备好完成任务，您只需为每个图标添加计数器以分离状态并根据图标类型调用状态，一个小的实现可能是：

import React from "react";
import { Avatar, Card, Icon, List } from "antd";

import { ICON_LIST, LIST_TEXTS, STYLES, USER_UPLOAD } from "./constants";

const { AVATAR, CARD_CONTAINER, ICON, USER_LIST } = STYLES;
const { INNER, MORE, UPLOAD, VERTICAL } = LIST_TEXTS;

class Home extends React.Component {
  state = {
    clicks: 0,
    heartClicks: 0,
    dislikeClicks: 0,
    emojiClicks: 0
  };

  IncrementIconText = type => {
    if (type === "heart") {
      this.setState({ heartClicks: this.state.heartClicks + 1 });
    } else if (type === "dislike") {
      this.setState({ dislikeClicks: this.state.dislikeClicks + 1 });
    } else if (type === "meh") {
      this.setState({ emojiClicks: this.state.emojiClicks + 1 });
    }
  };

  render() {
    const actions = ICON_LIST.map(({ type }) => (
      <span>
        <Icon
          key={type}
          type={type}
          onClick={() => this.IncrementIconText(type)}
          style={ICON}
        />
        {type === "heart"
          ? this.state.heartClicks
          : type === "dislike"
          ? this.state.dislikeClicks
          : this.state.emojiClicks}
      </span>
    ));
    return (
      <List
        itemLayout={VERTICAL}
        dataSource={USER_UPLOAD}
        renderItem={item => (
          <List.Item style={USER_LIST}>
            <Card
              actions={actions}
              cover={<img alt={UPLOAD} src={item.image} />}
              extra={<Icon type={MORE} />}
              hoverable
              title={
                <a>
                  <Avatar src={item.image} style={AVATAR} />
                  {item.user}
                </a>
              }
              type={INNER}
              style={CARD_CONTAINER}
            >
              {item.story}
            </Card>
          </List.Item>
        )}
      />
    );
  }
}

export default Home;

Answer 3

现在每个图标上都有一个状态 (clicks)。对于每张卡片上的每个图标，这是相同的状态和相同的处理程序。

要获得所需的功能，每个图标都需要不同的计数。

这是一个如何做到这一点的例子（我分叉了你的codesandbox）：https://codesandbox.io/s/pyj2288l0

此外，对于依赖于先前状态的状态更新，您应该使用 this.setState((prevState) => {...})。这是因为状态更改可以是异步的，并且 this.state 不能保证是您所期望的。以下是有关您为何需要它的文档：https://reactjs.org/docs/state-and-lifecycle.html#state-updates-may-be-asynchronous

卡组件无法正常工作

Card component does not function properly

javascript

reactjs

next.js