React Native CRUD 与 RESTful API 和 Redux 状态管理

Question

我是 react native 的新手，正在尝试使用 CRUD 操作和 RESTful API 创建一个应用程序，但我被困在 UPDATE/PUT 中，有人可以帮忙解决这个问题吗？以下是我的前端+后端代码：

后端

// update data by id
router.put('/:id', validate, (req, res) => {
const bookId = req.params.id
const errors = validationResult(req)

if(!errors.isEmpty()){
    return res.status(422).send({errors: errors.array()})
}

Book.findById(bookId)
    .then(book => {
        book.bookTitle = req.body.bookTitle,
        book.ImgURL = req.body.ImgURL,
        book.bookDescription = req.body.bookDescription,
        book.bookAuthor = req.body.bookAuthor,
        book.bookPrice = req.body.bookPrice,
        book.bookTypes = req.body.bookTypes,
        book.bookYear = req.body.bookYear,
        book.bookRating = req.body.bookRating,
        book.bookPages = req.body.bookPages

        return book.save()
    })
    .then(result => res.send(result))
    .catch(errors => console.log(errors))
   })

在 POSTMAN 中的结果，我将标题从如何酿造 -> 如何像专业人士一样酿造

ReduxAction.js

export const editBook = ({id, bookTitle, ImgURL, bookDescription, bookAuthor, bookPrice, bookTypes, bookYear, bookRating, bookPages}) => {
return async dispatch => {
    const response = await fetch(`http://localhost:3000/api/books/${id}`, {
        method: 'PUT',
        body: JSON.stringify({id, bookTitle, ImgURL, bookDescription, bookAuthor, bookPrice, bookTypes, bookYear, bookRating, bookPages})
    })

    const responseData = await response.json()

    dispatch({
        type: EDIT_BOOKS,
        payload: responseData
    })
   }
 }

EditScreen.js

import React, {useState, useEffect} from 'react'
import { StyleSheet, Text, View, ScrollView, TextInput, Button, KeyboardAvoidingView, Alert, 
ActivityIndicator } from 'react-native'
import { useDispatch, useSelector } from 'react-redux'
import * as bookAction from '../redux/actions/bookAction'
import { Formik } from 'formik'
import * as Yup from 'yup'
import DropDownPicker from 'react-native-dropdown-picker'

const formSchema = Yup.object({
bookTitle: Yup.string().required('*required').min(5, '*must be between 5 to 50 characters').max(50, '*must be between 5 to 50 characters'),
ImgURL: Yup.string().required('*required'),
bookDescription:  Yup.string().required('*required').min(30, '*must be at least 30 characters'),
bookAuthor: Yup.string().required('*required'),
bookPrice: Yup.number().required('*required'),
bookTypes: Yup.string().required('*required'),
bookYear: Yup.number().required('*required'),
bookRating: Yup.number().required('*required'),
bookPages: Yup.number().required('*required')
 })

const AddBookScreen = props => {

const {id} = props.route.params
const book = useSelector(state => state.book.books.find(book => book._id === id))


const [isLoading, setIsLoading] = useState(false)

if(isLoading) {
    return (
        <View style={styles.centered}>
            <ActivityIndicator size="large" />
        </View>
    )
}

const dispatch = useDispatch()

return (
    <KeyboardAvoidingView
            behavior="padding"
            keyboardVerticalOffset={100}
            style={{flex: 1}}>
        <ScrollView>
            <Formik
                initialValues={{
                    id: id,
                    bookTitle: book.bookTitle,
                    ImgURL: book.ImgURL,
                    bookDescription: book.bookDescription,
                    bookAuthor: book.bookAuthor,
                    bookPrice: book.bookPrice.toString(),
                    bookTypes: book.bookTypes,
                    bookYear: book.bookYear.toString(),
                    bookRating: book.bookRating.toString(),
                    bookPages: book.bookPages.toString()
                }}
                validationSchema={formSchema}
                onSubmit={(values) => {
                    console.log(values)
                    setIsLoading(true)
                    dispatch(bookAction.editBook(values))
                        .then(() => {
                            setIsLoading(false)
                            Alert.alert('book edited successfrully')
                        })
                        .catch(() => {
                            setIsLoading(false)
                            Alert.alert('an error occurred, please try again!')
                        })
                }}>
                {(props) => 
                (
                <View style={styles.form}>
                    <View style={styles.formGroup}>
                        <Text style={styles.label}>Book Title</Text>
                        <TextInput
                            style={styles.input}
                            onChangeText={props.handleChange('bookTitle')}
                            onBlur={props.handleBlur('bookTitle')}
                            value={props.values.bookTitle}
                        />
                        <Text style={styles.error}>{props.touched.bookTitle && props.errors.bookTitle}</Text>
                    </View>
                    
                    <View style={styles.formGroup}>
                        <Text style={styles.label}>Imgae URL</Text>
                        <TextInput
                            style={styles.input}
                            onChangeText={props.handleChange('ImgURL')}
                            onBlur={props.handleBlur('ImgURL')}
                            value={props.values.ImgURL}
                        />
                        <Text style={styles.error}>{props.touched.ImgURL && props.errors.ImgURL}</Text>
                    </View>

                    <View style={styles.formGroup}>
                        <Text style={styles.label}>Book Description</Text>
                        <TextInput
                            style={styles.input}
                            onChangeText={props.handleChange('bookDescription')}
                            onBlur={props.handleBlur('bookDescription')}
                            value={props.values.bookDescription}
                        />
                        <Text style={styles.error}>{props.touched.bookDescription && props.errors.bookDescription}</Text>
                    </View>

                    <View style={styles.formGroup}>
                        <Text style={styles.label}>Book Author</Text>
                        <TextInput
                            style={styles.input}
                            onChangeText={props.handleChange('bookAuthor')}
                            onBlur={props.handleBlur('bookAuthor')}
                            value={props.values.bookAuthor}
                        />
                        <Text style={styles.error}>{props.touched.bookAuthor && props.errors.bookAuthor}</Text>
                    </View>

                    <View style={styles.formGroup}>
                        <Text style={styles.label}>Book Price</Text>
                        <TextInput
                            style={styles.input}
                            onChangeText={props.handleChange('bookPrice')}
                            onBlur={props.handleBlur('bookPrice')}
                            value={props.values.bookPrice}
                            keyboardType='numeric'
                        />
                        <Text style={styles.error}>{props.touched.bookPrice && props.errors.bookPrice}</Text>
                    </View>

                    <View style={styles.formGroup}>
                        <Text style={styles.label}>Book Types</Text>
                        <TextInput
                            style={styles.input}
                            onChangeText={props.handleChange('bookTypes')}
                            onBlur={props.handleBlur('bookTypes')}
                            value={props.values.bookTypes}
                        />
                        <Text style={styles.error}>{props.touched.bookTypes && props.errors.bookTypes}</Text>
                    </View>

                    <View style={styles.formGroup}>
                        <Text style={styles.label}>Book Year</Text>
                        <TextInput
                            style={styles.input}
                            onChangeText={props.handleChange('bookYear')}
                            onBlur={props.handleBlur('bookYear')}
                            value={props.values.bookYear}
                            keyboardType='numeric'
                        />
                        <Text style={styles.error}>{props.touched.bookYear && props.errors.bookYear}</Text>
                    </View>

                    <View style={styles.formGroup}>
                        <Text style={styles.label}>Book Rating</Text>
                        <TextInput
                            style={styles.input}
                            onChangeText={props.handleChange('bookRating')}
                            onBlur={props.handleBlur('bookRating')}
                            value={props.values.bookRating}
                            keyboardType='numeric'
                        />
                        <Text style={styles.error}>{props.touched.bookRating && props.errors.bookRating}</Text>
                    </View>

                    <View style={styles.formGroup}>
                        <Text style={styles.label}>Book Pages</Text>
                        <TextInput
                            style={styles.input}
                            onChangeText={props.handleChange('bookPages')}
                            onBlur={props.handleBlur('bookPages')}
                            value={props.values.bookPages}
                            keyboardType='numeric'
                        />
                        <Text style={styles.error}>{props.touched.bookPages && props.errors.bookPages}</Text>
                    </View>

                    <View style={styles.buttonContainer}>
                        <Button title='save edit' onPress={props.handleSubmit} color='steelblue' />
                    </View>
                </View>
                )}

            </Formik>
        </ScrollView>
    </KeyboardAvoidingView>
     )
    }

   export default AddBookScreen

   const styles = StyleSheet.create({
    form: {
    backgroundColor: "#ffffff",
    padding: 20,
    borderRadius: 10,
  },
  formGroup: {
    width: "100%",
  },
  label: {
    marginVertical: 10,
  },
  input: {
    paddingHorizontal: 2,
    paddingVertical: 8,
    borderBottomColor: "#ccc",
    borderBottomWidth: 1,
  },
  buttonContainer: {
    marginTop: 20,
  },
  error: {
      color: 'red'
  },
centered: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center'
  }
  })

React Native 调试器

已编辑

通过修改 ReduxReducer.js 来修复调试器中的错误

        case EDIT_BOOKS:
        return {
            ...state,
            books: state.books.map(book => action.payload.find(item => item.id === book._id) || book)
            
        }

错误消失了，但没有更新数据

Answer 1

所以我通过编辑 ReduxReducer.js 找到了我的问题的解决方案

        case EDIT_BOOKS:
         return {
            ...state,
            books: [...state.books]
        
          }