Nodejs MongoDB - 添加新條目 Post()

Question

因此嘗試將新條目發布到 MongoDB。但在 Redux 中出現此錯誤Product validation failed: name: Path 'name' is required., description: Path 'description' is required.

nodejs 版本：14.9.0 和 Atlas mongodb。

前端addProduct.js頁面：

import { createProduct } from '../redux/actions/productActions'

const [name, setName] = useState('')
const [description, setDescription] = useState('')


const createProductHandler = (e) => {
    e.preventDefault()
    dispatch(createProduct({
        name,
        description
    }))
}

 const nameHandler = (e) => {
    setName(e.target.value)
}

const descriptionHandler = (e) => {
    setDescription(e.target.value)
}

return (
  <input type='text' onChange={nameHandler} />
  <input type='text' onChange={descriptionHandler} />
  <input type="submit" value='submit' onClick={createProductHandler} />
)

產品控制器：

const createdProduct = asyncHandler(async (req, res) => {
  const mongoProduct = async (data) => {
    return new Product({
        name: data.name,
        description: data.description
    })
  }

 const product = await mongoProduct(req.body)

 const createdProduct = await product.save()

 res.status(201).json(createdProduct)
})

產品操作：

export const createProduct = () => async (dispatch, getState) => {
try {
    dispatch({
        type: 'PRODUCT_CREATE_REQUEST',
    })

    const {
        userLogin: {userInfo},
    } = getState()

    const config = {
        headers: {
            Authorization: `Bearer ${userInfo.token}`,
        },
    }

    const { data } =  await axios.post(`/api/products`, {}, config)

    dispatch({
        type: 'PRODUCT_CREATE_SUCCESS',
        payload: data
    })
} catch (error) {
    dispatch({
        type: 'PRODUCT_CREATE_FAIL',
        payload:
            error.response && error.response.data.message
                ? error.response.data.message
                : error.meessage,
    })
 }
} 

productReducers.js：

export const productCreateReducer = (state = {}, action) => {
switch (action.type) {
    case 'PRODUCT_CREATE_REQUEST':
        return {loading: true}
    case 'PRODUCT_CREATE_SUCCESS':
        return {loading: false, success: true, product: action.payload}
    case 'PRODUCT_CREATE_FAIL':
        return {loading: false, error: action.payload}
    default: 
        return state
 }
}

或者，當我嘗試使用 productController.js 中的此代碼從郵遞員填充數據庫時，它可以很好地處理示例數據：

const createdProduct = asyncHandler(async (req, res) => {
 const product = new Product({
    name: 'Sample Name',
    description: 'Sample Description'
 })

 const createdProduct = await product.save()
 res.status(201).json(createdProduct)
})

加上我在控制台中獲取POST ipadress/api/products 500 (Internal Server Error)

Answer 1

您可以將axios api 服務配置配置為分隔文件並使用axios

const request = axios.create({
  // baseURL: 'https://mock-api.com',
  baseURL: BASE_URL ,
  timeout: 5000
})

request.interceptors.request.use(
  config => {
    // get token
    if (// check your token) {
      config.headers["Authorization"] = "Bearer ${your-token}"
    }
    return config
  },
  error => {
    // Do something with request error
    console.log(error) // for debug
    Promise.reject(error)
  }
)

// Can also config axios response interceptors to handle API error

你的redux動作

import axiosInstance from './your-axios-config-path'

export const createProduct = (product) => async (dispatch, _getState) => {
  try {
    dispatch({ type: 'PRODUCT_CREATE_REQUEST' })
    const response = await axiosInstance.post(`/api/products`, {...product})
    dispatch({
      type: 'PRODUCT_CREATE_SUCCESS',
      payload: response?.data ?? {}
    })
  } catch (error) {
    dispatch({
      type: 'PRODUCT_CREATE_FAIL',
      payload: // error message,
    })
  }
}

或者，您可以使用Redux 工具包，它更容易設置商店和使用。 它包括createAsyncThunk和RTK 查詢來處理副作用。