Блог

Главная - Вопросы по программированию - В чем причина, не менять реквизиты после отправки?

В чем причина, не менять реквизиты после отправки?

#javascript #reactjs #react-redux

#javascript #reactjs #реагировать-redux

Вопрос:

Я новичок в react и разрабатываю очень простое приложение с базой данных MySQL. Здесь я отправляю обзоры в БД и возвращаю данные из БД в пользовательский интерфейс. После нажатия кнопки отправки в пользовательском интерфейсе не отображается обновленный список фильмов и просмотров. Кроме того, реквизиты не меняются. Пожалуйста, помогите мне понять, что я здесь сделал неправильно. Кроме того, любые улучшения в коде приветствуются.

Структура приложения

App.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 amp;amp; 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

Ответ №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. Похоже, здесь это не так. Вы можете легко получить свои данные из своего хранилища, используя useSelector предоставленный redux, подробнее об этом читайте здесь .

Кроме того, попробуйте прочитать redux-thunk и как отправлять асинхронные действия в ваше хранилище redux. Это простое промежуточное программное обеспечение, которое поможет вам это сделать.

Затем проверьте свой магазин redux с помощью инструментов разработки в вашем браузере, чтобы вы всегда могли видеть, в каком состоянии он находится. Инструменты разработки redux позволят вам увидеть, когда было отправлено действие и как оно повлияло на состояние вашего хранилища. Это значительно упрощает проверку правильного состояния вашего хранилища.