时间戳

首页 > 解决方案 > 什么原因，提交后没有更改道具？

javascript - 什么原因，提交后没有更改道具？

问题描述

我是新手，我正在使用 MySQL 数据库开发一个非常简单的应用程序。在这里，我向数据库提交评论并将数据从数据库返回到 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

标签： javascriptreactjsreact-redux

解决方案

您的评论来自此片段的哪里？

import React, { useState, useEffect, Component } from 'react';

export const addReview = (review) => {

    return (dispatch, getState) => {

        dispatch({
            type: 'ADD_REVIEW',
            addReview: review
        })

    }
}

export default addReview

他们需要来自的地方当然是你的 redux 商店。这似乎不是这里的情况。useSelector您可以通过使用redux 提供的方式轻松地从您的商店中获取您的数据，更多信息请阅读这里。

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

接下来，使用浏览器中的开发工具检查您的 redux 商店，以便随时查看它所处的状态。redux 开发工具将让您了解何时调度操作以及它如何影响商店的状态。这样可以更轻松地查看您的商店是否具有正确的状态。

推荐阅读