Question

嗨，希望有人能帮忙，

当我在 topicDetail 组件重新呈现时从我的表中删除一个项目时，它没有显示表中的一半信息，我必须刷新页面。它不显示 top.topic.subject 和 top.topic.level。

这是我的dashboard.js组件文件

import React, { Fragment, useEffect } from 'react';
import { Link } from 'react-router-dom';
import PropTypes from 'prop-types';
import { connect } from 'react-redux';
import DashboardActions from './DashboardActions';
import { getCurrentProfile, deleteAccount } from '../../actions/profile';
import TopicDetail from './TopicDetail';



const Dashboard = ({
  getCurrentProfile,
  deleteAccount,
  auth: { user },
  profile: { profile }
}) => {
  useEffect(() => {
    getCurrentProfile();
  }, [getCurrentProfile]);

  return (
    <Fragment>
      <h1 className="large text-primary1">Dashboard</h1>
          
      <p className="lead my-4">
        <i className="fas fa-user" /> Welcome {user && user.name}
      </p>
      {profile !== null ? (
        <Fragment>
          <DashboardActions />
          <div className="my-4 py-4">
            <TopicDetail  topic={profile.topics}/>
          </div>
          <div className="my-4">
            <button className="btn btn-danger" title="Delete my Account" onClick={() => deleteAccount()}>
              <i className="fas fa-user-minus" /> Delete My Account
            </button>
          </div>
        </Fragment>
      ) : (
        <Fragment>
          <p>You have not yet setup a profile, please add some info</p>
          <Link to="/create-profile" className="btn btn-primary1 my-1">
            Create Profile
          </Link>
        </Fragment>
      )}
    </Fragment>
  );
};


Dashboard.propTypes = {
  getCurrentProfile: PropTypes.func.isRequired,
  deleteAccount: PropTypes.func.isRequired,
  auth: PropTypes.object.isRequired,
  profile: PropTypes.object.isRequired
};

const mapStateToProps = (state) => ({
  auth: state.auth,
  profile: state.profile
});

export default connect(mapStateToProps, { getCurrentProfile, deleteAccount })(
  Dashboard
);

这是我的 topicDetail.js 组件文件

import React, { Fragment, useState } from 'react'
import PropTypes from 'prop-types';
import { connect } from 'react-redux';
import { Link } from 'react-router-dom';
import { deleteTopic } from '../../actions/profile';

const TopicDetail = ({ topic, deleteTopic }) => {
    const topics = topic.map(top => (
        <tr key={top._id}>
        <td>{top.topic.subject}</td>
        <td className="hide-sm"> {top.topic.level}</td>
        <td className="hide-sm">{top.subjectType}</td>
        <td> {top.score > 0  ? (top.score) : (<p>N/A</p>)}</td>
        <td> 
            <button
                onClick={() => deleteTopic(top._id)}
                className="btn btn-danger my-2"
                title="Delete Topic"
            >
            <i className="far fa-trash-alt fa-1x py-2" />
            </button>
            <button
            className="btn btn-white my-2"
            title="Go to Topic"
            >
            <Link className="myLink" to={`/topic/${top.subjectType}/${top.topic._id}`}>
             <i className="fas fa-file fa-1x py-2 "></i>
            </Link>
            </button>
        </td>
        </tr>
    ));

          <Link to='/topic' className='btn btn-light'>
      <i className="fas fa-pencil-alt text-primary1" /> Add a Topic
      </Link>
    
    return (
        <Fragment>
            <h2 className="large text-primary1 my-4">Current Topics</h2>
            <table className="table">
                <thead>
                    <tr>
                        <th>Subject</th>
                        <th className="hide-sm">Level</th>
                        <th className="hide-sm">Type</th>
                        <th>Score</th>
                        <th />
                    </tr>
                </thead>
                <tbody>{topics}</tbody>
            </table>

        </Fragment>

    )
}


TopicDetail.propTypes = {
    topic: PropTypes.array.isRequired,
    deleteTopic: PropTypes.func.isRequired
}

export default connect(null, { deleteTopic })(TopicDetail);

谢谢

Answer 1

感谢 Filipe 的指导。问题出在我的减速器上。我没有过滤返回状态。

    case DELETE_TOPIC:
      return {
        ...state,
        profile: {
          ...state.profile,
          topics: state.profile.topics.filter(
            (topic) => topic._id !== payload
          )
        },
        loading: false
      }

从表中删除主题后，数据不会重新呈现

1 个答案: