Question

所以我基本上是在尝试更新来自数据库的条目。

我的update.js文件中有此文件

import React, { Fragment, useState, useEffect } from 'react';
import { Link, withRouter } from 'react-router-dom';
import PropTypes from 'prop-types';
import { connect } from 'react-redux';
import Spinner from '../../layout/Spinner';
import { updatePage, getPost } from '../../../actions/admin/page';

const Update = ({
  page: { page, loading },
  updatePage,
  getPost,
  history
}) => {
  const [formData, setFormData] = useState({
    user: '',
    commented: '',
    menu: '',
    status: '',
    title: '',
    slug: '',
    text: ''
  });

  useEffect(() => {
    getPost();
    setFormData({
      user: loading || !page.user ? '' : page.user,
      title: loading || !page.title ? '' : page.title,
      slug: loading || !page.slug ? '' : page.slug,
      text: loading || !page.text ? '' : page.text,
      commented: loading || !page.commented ? '' : page.commented,
      menu: loading || !page.menu ? '' : page.menu,
      status: loading || !page.status ? '' : page.status
    });
    // eslint-disable-next-line
  }, [loading, getPost]);

  const {
    user,
    title,
    slug,
    text,
    commented,
    menu,
    status
  } = formData;

  const onChange = e =>
    setFormData({ ...formData, [e.target.name]: e.target.value });

  const onSubmit = e => {
    e.preventDefault();
    updatePage(formData, history, true);
  };

  return (
    <Fragment>
      {loading ? (
        <Spinner />
      ) : (
          <section className="mb-3">
            <div className="container-fluid">
              <h1 className="large text-primary">Update Your Page</h1>
              <p className="lead"><i className="fas fa-user" /> Let's get some information to make your profile stand out</p>
              <small>* = required field</small>
              <form className="form" onSubmit={e => onSubmit(e)}>
                <div className="form-group">
                  <input
                    type="text"
                    placeholder="* User"
                    name="user"
                    autoComplete="user"
                    className="form-control"
                    value={user}
                    onChange={e => onChange(e)}
                  />
                  <small className="form-text">Could be your own nickname</small>
                </div>
                <div className="form-group">
                  <input
                    type="text"
                    placeholder="* Title"
                    name="title"
                    autoComplete="title"
                    className="form-control"
                    value={title}
                    onChange={e => onChange(e)}
                  />
                  <small className="form-text">Could be your own nickname</small>
                </div>
                <div className="form-group">
                  <input
                    type="text"
                    placeholder="* Slug"
                    name="slug"
                    autoComplete="slug"
                    className="form-control"
                    value={slug}
                    onChange={e => onChange(e)}
                  />
                  <small className="form-text">Could be your own nickname</small>
                </div>
                <div className="form-group">
                  <select name="commented" autoComplete="commented" className="form-control" value={commented} onChange={e => onChange(e)}>
                    <option value="none">* Select Professional Status</option>
                    <option value="yes">Yes</option>
                    <option value="no">No</option>
                  </select>
                  <small className="form-text">Give us an idea of where you are at in your career</small>
                </div>
                <div className="form-group">
                  <select name="status" autoComplete="status" className="form-control" value={status} onChange={e => onChange(e)}>
                    <option value="none">* Select Professional Status</option>
                    <option value="published">Published</option>
                    <option value="draft">Draft</option>
                    <option value="trash">Trash</option>
                  </select>
                  <small className="form-text">Give us an idea of where you are at in your career</small>
                </div>
                <div className="form-group">
                  <select name="menu" autoComplete="menu" className="form-control" value={menu} onChange={e => onChange(e)}>
                    <option value="none">* Select Sex Orientation</option>
                    <option value="yes">Yes</option>
                    <option value="no">No</option>
                  </select>
                  <small className="form-text">This will help your visitors to 'match' with their intereses</small>
                </div>
                <div className="form-group">
                  <textarea
                    placeholder="A short bio of yourself"
                    name="text"
                    autoComplete="text"
                    className="form-control"
                    value={text}
                    onChange={e => onChange(e)}
                  />
                  <small className="form-text">Tell us a little about yourself</small>
                </div>
                <div className="btn-group">
                  <input type="submit" className="btn btn-primary my-1" />
                  <Link className="btn btn-dark my-1" to="/dashboard">Go Back</Link>
                </div>
              </form>
            </div>
          </section>
        )}
    </Fragment>
  );
};

Update.propTypes = {
  updatePage: PropTypes.func.isRequired,
  getPost: PropTypes.func.isRequired,
  page: PropTypes.object.isRequired
};

const mapStateToProps = state => ({
  page: state.page
});

export default connect(
  mapStateToProps,
  { updatePage, getPost }
)(withRouter(Update));

我实际上是从操作文件中获取帖子的，

export const getPost = id => async dispatch => {
  dispatch({ type: CLEAR_PAGE });
  try {
    const res = await axios.get(`/api/admin/pages/${id}`);

    dispatch({
      type: GET_PAGE,
      payload: res.data
    });
  } catch (err) {
    dispatch({
      type: PAGE_ERROR,
      payload: { msg: err.response.statusText, status: err.response.status }
    });
  }
};

API路由运行良好，我使用的是邮递员，我可以毫无问题地获得该帖子。现在真正的问题是它使我误以为：

Cannot read property 'user' of null

我已经检查了空格（有时会使此错误发生）。我将数据库中的数据与我要获取的数据进行了三倍比较，但仍然没有。

此外，当我在三个对象中注释“用户”时，useState，useEffect和在const = formData中找到的用户。然后显示错误Cast to ObjectId failed for value "undefined" at path "_id" for model "Pages"。

我希望我能解释清楚自己，希望你们能帮助我。我从未见过此错误，并试图在Google中找到解决方案，但大多数人都说要检查空格等。我不知道现在可能出什么问题。

Answer 1

通过查看您的update.js，我发现您最有可能由于page.page属性是null而遇到此错误，请尝试检查其是否正确传递

无法读取null的“用户”属性

1 个答案: