提交后不更改道具的原因是什么

Question

我刚开始反应，正在用MySQL数据库开发一个非常简单的应用程序。在这里，我向DB提交评论，并将数据从DB返回到UI。点击提交按钮后，它不会在UI上显示更新的电影和评论列表。此外，道具不会改变。请帮我理解我在这里做错了什么。此外，欢迎对代码进行任何改进。

应用程序的结构

应用程序.js

import React, { useState, useEffect, Component } from 'react';
import './App.css';
import { addReview } from './actions/actionReview'
import { bindActionCreators } from 'redux'
import { connect } from 'react-redux'
import ReviewList from './components/reviewListComponent'
import Axios from 'axios'
class App extends Component {
state = {
review: {
movie_name: '',
movie_review: ''
}
}
componentDidMount() {
Axios.get('http://localhost:3001/api/get').then(
(response) => {
this.setState({ ReviewList: response.data })
}
)
}
handleChange = (e) => {
this.setState({
[e.target.id]: e.target.value
})
}
handleSubmit = (e) => {
e.preventDefault();

this.props.addReview(this.state)
}
render() {
const { filmReviews } = this.props;
return (
<div className="App">
<h1>Movie Reviews</h1>
<div className="form">
<label>Movie Name</label>
<input type="text" id="film" onChange={this.handleChange} />
<label>Review</label>
<input type="text" id="review" onChange={this.handleChange} />
<button
onClick={this.handleSubmit}
>Submit
</button>
<h1>Review List</h1>
<div className='Project-list-section'>
{this.state.ReviewList && this.state.ReviewList.map(review => {
return (
<ReviewList filmReview={review} key={review.id} />
)
})}
</div>
</div>
</div>
);
}
}
function mapStateToProps(state) {
return {
filmReviews: state.ReviewList
}
}
const matchDispatchToProps = (dispatch) => {
return {
addReview: (review) => dispatch(addReview(review))
}
}
export default connect(mapStateToProps, matchDispatchToProps)(App);

allReviewReducer.js

import React, { useState, useEffect, Component } from 'react';
import Axios from 'axios'
const initState = {}
function allReviewReducer(state = initState, action) {
switch (action.type) {
case 'ADD_REVIEW':
console.log('Review received', action.addReview)
fetchReview(action.addReview)
case 'DISPLAY_ALL_REVIEWS':
console.log('please display all reviews')
default:
return state;
}
return state
}

function fetchReview(review) {
Axios.post("http://localhost:3001/api/insert",
{
movieName: review.film,
movieReview: review.review
}).then(() => {
alert('Successful Insert');
})
}
export default allReviewReducer

rootReducer.js

import { combineReducers } from 'redux'
import allReviewReducer from './allReviewsReducer'
const rootReducer = combineReducers({
allReview : allReviewReducer
})
export default rootReducer

reviewListComponent.js

import React from 'react'
const ReviewList = (filmReviews) => {
return (
<div>
<h3>{filmReviews.filmReview.movie_name} || {filmReviews.filmReview.movie_review}</h3>
</div>
)
}
export default ReviewList

actionReview.js

import React, { useState, useEffect, Component } from 'react';
export const addReview = (review) => {
return (dispatch, getState) => {
dispatch({
type: 'ADD_REVIEW',
addReview: review
})
}
}
export default addReview

Answer 1

您的评论在这个片段中来自哪里？

import React, { useState, useEffect, Component } from 'react';
export const addReview = (review) => {
return (dispatch, getState) => {
dispatch({
type: 'ADD_REVIEW',
addReview: review
})
}
}
export default addReview

它们需要从哪里来当然是你的redux商店。这里的情况似乎并非如此。您可以使用redux提供的useSelector轻松地从您的商店中获取数据，有关更多信息，请阅读此处。

此外，请尝试阅读redux-thunk以及如何将异步操作分派到redux存储。它是一个简单的中间件，可以帮助您做到这一点。

接下来，在浏览器中使用开发工具检查您的redux商店，这样您就可以随时看到它处于哪个状态。redux开发工具将让您看到动作是何时发出的，以及它如何影响商店的状态。这样可以更容易地查看您的商店是否具有正确的状态。