reactjs - 从表中删除主题后,数据不会重新呈现
问题描述
嗨希望有人可以帮助,
当我在 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);
谢谢
解决方案
感谢 Filipe 的指导。问题出在我的减速机上。我没有过滤返回状态。
case DELETE_TOPIC:
return {
...state,
profile: {
...state.profile,
topics: state.profile.topics.filter(
(topic) => topic._id !== payload
)
},
loading: false
}
推荐阅读
- firebase - onCreate 函数未在 firebase 函数中调用
- python - 如何在 Linux 上的 Python 虚拟环境中安装和使用 Jupyter lab?
- powershell - 如何使用 powershell 更新 AD 用户的 UsageLocation
- ace-editor - 什么是 blob:http://localhost:9000/064e8460-0ef0-4903-a867-7548088308a3 在 ace.js
- mongodb - 如何进行更快的 MongoDB 聚合?
- multithreading - IntelliJ IDEA 更改默认断点暂停策略
- javascript - 检测形式的变化
- docusignapi - 关于 API 计划订阅和生产行为的说明
- javascript - 如何使用带有 json 返回对象的 jQuery-Autocomplete
- android - 如何在android studio的原始文件夹中获取创建的android目录中文件的路径