Когда я удаляю фотографию из своего приложения, я не могу щелкнуть ни одну из других, не обновляя страницу. Приложение представляет собой веб-сайт, написанный на стеке MERN с помощью Redux. Это простой поток фотографий, который вы можете щелкнуть и просмотреть фотографию на отдельной странице с комментариями.
Проблема в том, что после удаления фотографии из потока я не могу щелкнуть другие фотографии, не получив ' Невозможно прочитать свойство неопределенной ошибки. Если я обновлю sh страницу, я снова смогу щелкнуть любую фотографию. Вы можете посетить сайт здесь , загрузить фотографию, удалить фотографию, затем щелкнуть другую фотографию, чтобы увидеть пустой экран и ошибку в консоли.
Когда я запускаю приложение локально Я получаю немного другие ошибки, но проблема в пустых массивах. Иногда в сообщении об ошибке говорится: «this.props.comments.map не является функцией», а иногда - «TypeError: невозможно прочитать свойство« filename »со значением null», поэтому по какой-то причине DOM считает (?), Что фотографии и комментарии пусты. массивы? Я надеюсь, что смогу предоставить достаточно информации между компонентами React, действиями Redux и редукторами и сервером NodeJS.
Since the error is showing the comment 'action' I will start by displaying that function.
export const individualComments = filename => (dispatch) => {
axios
.get(`/api/comments/comments/${filename}`)
.then(res =>
dispatch({
type: INDIV_COMMENTS,
payload: res.data
})
)
.catch(err =>
dispatch(returnErrors(err.response.data, err.response.status))
);
}
We are still in Redux with this next block of code. Here is the reducer for this action. The case INDIV_COMMENTS
export default (state = defaultState, action) => {
switch (action.type) {
case INDIV_COMMENTS:
return {
...state,
comments: action.payload
}
default:
return state;
}
}
Next we will move out of Redux, out of the client.
Here is that route the action calls from the server side in /api.
router.get('/comments/:filename', (req, res) => {
Comment.find({page: req.params.filename
}, (err, files) => {
// Check if files
if (!files || files.length === 0) {
return res.json(files);
} else if (files) {
return res.json(files);
} else {
return res.json(err);
}
}
);
});
Here is a part of the React component in one of the errors.
class Post extends React.Component {
constructor(props) {
super(props)
this.submitFormHandler = this.submitFormHandler.bind(this)
}
componentDidMount() {
this.props.singleView(this.props.match.params.filename);
this.props.individualComments(this.props.match.params.filename);
window.scrollTo(0, 0);
}
submitFormHandler = (e) => {
e.preventDefault();
const ncomment = (this.refs.aComment.value)
const page = this.props.match.params.filename
this.props.commentUploader(ncomment, page)
this.refs.aComment.value = '';
}
render() {
if(!this.props.comments && !this.props.photos ) {
return (
Загрузка ... )} else {return (
... Пропуск кода React здесь для краткости
<h4 className="another-comment">Comments</h4>
{this.props.comments.map(post => (
<div className="post-card" key={post._id}>
<div className="card-content">
<span className="card-title red-text">Date:{post.date}</span>
<p className="comment-text-in">Comment: {post.content}</p>
</div>
</div>))}
... Пропуск еще кода React здесь для краткости
const mapStateToProps = (state) => {
return {
array: state.photos.array,
comments: state.comments.comments
}
}
export default connect(mapStateToProps,
{ allPhotos, singleView, commentUploader,
individualComments })(Post);
Спасибо за ваше Помощь. Надеюсь, я предоставил достаточно информации.