Блог

Я создал действие updateChapter для обновления базы данных. Я импортировал это в свой вызываемый компонент EditChapter . Когда я регистрировал реквизит для этого компонента, я не вижу updateChapter действий с этим реквизитом.

Я сопоставил некоторые другие действия из того же Actions.js файла с каким-либо другим компонентом, и они работают нормально. Я не понимаю этого случая. Вот мой код.

Actions.js

 export const updateChapter = formData => dispatch => {
    myAxios.post('/updateChapter', formData)
    .then(res => {
        console.log(res);
    })
    .catch(err => {
        console.log(err)
    });
}
 

Файл компонента

 import React from 'react';
import {connect} from 'react-redux';
import {updateChapter} from '../../store/chapterStore/Actions';

const EditChapter = props => {

    const {classes} = props;
    const [chapterTitle, setChapterTitle] = React.useState('');

    const updateChapterHandler = (event) => {
        event.preventDefault();
        let formState = {
            chapter_title: chapterTitle,
        }
        let formData = appendDataIntoFormData(formState);

        props.updateChapter(formData);
    }

    return (
        <div>
            <form onSubmit={updateChapterHandler}>
                 <Grid item xs={12}>
                        <FormControl
                            component="fieldset"
                            fullWidth
                            margin="normal">
                            <FormLabel component="legend">
                                Chapter Title
                            </FormLabel>
                            <TextField 
                            required
                            value={chapterTitle}
                            onChange={event => setChapterTitle(event.target.value)}/>
                        </FormControl>
                    </Grid>
            </form>
        </div>
     );
}

const mapActionToProps = ({
    updateChapter
});

export default connect(null, mapActionToProps)(EditChapter);
 

Не уверен, но попробуйте с этим:

     const mapActionToProps = dispatch => ({
          updateChapter: (formData) => dispatch(updateChapter(formData));
    }); 
 

Вы используете старый способ сокращения, мое предложение использовать последний способ React Redux братан!!

Вы можете использовать хуки, это упростит ваш код.

Проверьте документацию https://react-redux.js.org/api/hooks