Question

我有一个Bootstrap列表项列表，每个列表项都有一个文本和一个按钮。当用户点击它被选中的项目时，当他点击项目中的按钮时该项目被删除，并且不应被选中;-)所以我在Button-onClick中使用e.stopPropagation（）。这是组件代码：

import React from 'react';
import { ListGroup, ListGroupItem, Button } from 'react-bootstrap';
import moment from 'moment';
import FontAwesome from 'react-fontawesome';

import './messagesList.css';

const DATE_FORMAT = 'ddd DD MMMM, H:mm';

export default ({ messages, currentMessage, selectMessage, deleteMessage }) =>
  <ListGroup>
    {messages.map((message, i) => {
      const active = currentMessage === i;
      return (
        <ListGroupItem
          key={message.time_sent}
          active={active}
          onClick={() => selectMessage(i)}
          className={message.read ? '' : 'MessageListRead'}
        >
          <span className="MessageListLabel">From:</span>&nbsp;
          <span>{message.sender}</span>
          <br />
          <span className="MessageListLabel">Subject:</span>&nbsp;
          <span>{message.subject}</span>
          <br />
          <span className="MessageListLabel">Sent:</span>&nbsp;
          <span>{moment.unix(message.time_sent).format(DATE_FORMAT)}</span>

          <Button
            className="MessageListDelete"
            onClick={(e) => {
              deleteMessage(message.id);
              e.stopPropagation();
            }}
          >
            <FontAwesome name="trash" />
          </Button>
        </ListGroupItem>
      );
    })}
  </ListGroup>;

父组件有：

  componentDidUpdate() {
    console.log(4, messages);
  }


  deleteMessage(messageId) {
    const { deleteMessage } = this.props;

    console.log(1, messageId)

    deleteMessage(messageId);

    // this.forceUpdate(); solves the problem, only not nice
  }

...

        <td className="InboxMessagesList">
          <MessagesList
            messages={messages}
            currentMessage={currentMessage}
            selectMessage={message => this.selectMessage(message)}
            deleteMessage={message => this.deleteMessage(message)}
          />
        </td>

Redux存储库已正确更新（项目已删除），但之后组件未更新。当我删除e.stopPropagation（）时一切正常。

行动：

export const deleteMessage = messageId => {
  return dispatch => {
    console.log(2, messageId);

    dispatch({
      type: DELETE_MAIL,
      payload: messageId
    });
  };
};

减速器：

case

 DELETE_MAIL:
      const m = messages.find(message => message.id === action.payload),
        index = messages.indexOf(m);

      if (index > -1) messages.splice(index, 1);

      console.log(3, messages);

      return {
        ...state,
        messages
      };

为什么没有触发更新？

单击删除按钮后，控制台如下所示：

4（6）[{...}，{...}，{...}，{...}，{...}，{...}]

1 1002

2 1002

3（5）[{...}，{...}，{...}，{...}，{...}]

在e.stopPropagation（）之后，Redux不会更新组件

0 个答案: