无法读取未定义的属性“错误”

时间:2020-06-25 11:45:45

标签: javascript reactjs

我已经尝试了很多次更改变量名,甚至从原始源代码复制过来的变量名,但是,我仍然不明白为什么错误属性显示您声明了错误属性,但从未使用过,但是在我了解了它的视频中工作正常。我什至无法访问数据库中的数据[出于检查目的,我使用了console.log语句,但仍然没有得到我的数据]。有人,请帮助我为什么会有这个问题。

这是我遇到的错误图片image

CODE

import React, { useState, useEffect } from 'react';
import Base from '../core/Base';
import { Link } from 'react-router-dom';
import { getCategories } from './helper/adminapicall';
import { isAuthenticated } from '../auth/helper/index';

const AddProduct = () => {
  const { user, token } = isAuthenticated();

  const [values, setValues] = useState({
    name: '',
    description: '',
    price: '',
    stock: '',
    photo: '',
    categories: [],
    category: '',
    loading: false,
    error: '',
    createdProduct: '',
    getaRedirect: false,
    formData: '',
  });

  const {
    name,
    description,
    price,
    stock,
    categories,
    category,
    loading,
    error,
    createdProduct,
    getaRedirect,
    formData,
  } = values;

  const preload = () => {
    getCategories().then((data) => {
      console.log(data);
      if (data.error) {
        setValues({ ...values, error: data.error });
      } else {
        setValues({ ...values, categories: data, formData: new FormData() });
      }
    });
  };

  useEffect(() => {
    preload();
  }, []);

const createProductForm = () => (
    <form>
      <span>Post photo</span>
      <div className='form-group'>
        <label className='btn btn-block btn-success'>
          <input
            onChange={handleChange('photo')}
            type='file'
            name='photo'
            accept='image'
            placeholder='choose a file'
          />
        </label>
      </div>
      <div className='form-group'>
        <input
          onChange={handleChange('name')}
          name='photo'
          className='form-control'
          placeholder='Name'
          value={name}
        />
      </div>
      <div className='form-group'>
        <textarea
          onChange={handleChange('description')}
          name='photo'
          className='form-control'
          placeholder='Description'
          value={description}
        />
      </div>
      <div className='form-group'>
        <input
          onChange={handleChange('price')}
          type='number'
          className='form-control'
          placeholder='Price'
          value={price}
        />
      </div>
      <div className='form-group'>
        <select
          onChange={handleChange('category')}
          className='form-control'
          placeholder='Category'>
          <option>Select</option>
          {categories &&
            categories.map((cate, index) => (
              <option key={index} value={cate._id}>
                {cate.name}
              </option>
            ))}
        </select>
      </div>
      <div className='form-group'>
        <input
          onChange={handleChange('quantity')}
          type='number'
          className='form-control'
          placeholder='Stock'
          value={stock}
        />
      </div>

      <button
        type='submit'
        onClick={onSubmit}
        className='btn btn-outline-success mb-3'>
        Create Product
      </button>
    </form>
  );

  return (
    <Base
      title='Add a product here!'
      description='Welcome to product creation section'
      className='container bg-info p-4'>
      <Link to='/admin/dashboard' className='btn btn-md btn-dark mb-3'>
        Admin Home
      </Link>
      <div className='row bg-dark text-white rounded'>
        <div className='col-md-8 offset-md-2'>{createProductForm()}</div>
      </div>
    </Base>
  );
};

export default AddProduct;

1 个答案:

答案 0 :(得分:0)

getCategories().then(data => {
  if (data && data.error) {
    setValues({ ...values, error: data.error });
  } else {
    setValues({ ...values, categories: data, formData: new FormData() });
  }
});