无法读取未定义未处理拒绝的属性“_id”

Question

由于某种原因，我正在从类组件转移到功能组件，最后一个组件破坏了应用程序。

之前有一个组件DidMount；这就是为什么我尝试使用 useEffect refreshContent 但如果将其删除，应用程序的某些功能将停止工作。

class UserSummary extends Component {

constructor(props) {
super(props);
this.state = initialState
  };

async componentDidMount() {
this.refreshContent();
}

代码示例：

import React, { useState, useEffect } from 'react';
import { Link } from 'react-router-dom';
import './UserSummary.css';
import todoService from '../../utils/todoService';
import EditTodoButton from '../EditTodoButton/EditTodoButton';

function UserSummary(props) {
  const [state, setState] = useState ({
    todo: {
      done: false
    }
  });

  useEffect(() => {
    refreshContent();
  });

  async function refreshContent() {
    const todos = await todoService.index(props.user);
    console.log( "FIRST ", todos)
    props.handleUpdateTodos(todos);
  }

  async function handleDeleteToDo(todo){
    await todoService.deleteToDo(todo);
    refreshContent();
  }

  async function handleEditToDo(todo, updatedToDo){
    await todoService.editToDo(todo, updatedToDo);
    refreshContent();
  }

  async function handleUpdateToDo(todo) {
    let update = todo;
    if (update.done) {
      update.done = false
    } else {
      update.done = true
    }
    await todoService.doneToDo(todo);
    const todos = await todoService.index(props.user);
    props.handleUpdateTodos(todos);
  }

  function TodoRows() {
    const { todos } = props;
    const todoRows = todos.map((todo, index) => (
      <ul key={index}>
        <li className="ToDoList">
          <input type="checkbox" defaultValue={setState.done} name="done" checked={todo.done} onChange={() => handleUpdateToDo(todo)} />&nbsp;&nbsp;Done&nbsp;&nbsp;
          <button onClick={() => handleDeleteToDo(todo)}><span role="img" aria-label="delete">????</span></button> &nbsp;&nbsp;
          <EditTodoButton
            {...props}
            refreshContent={refreshContent}
            handleEditToDo={handleEditToDo}
            todo={state.todo} 
          />&nbsp;&nbsp;
          <span className="badge">{index + 1}</span>&nbsp;&nbsp;&nbsp;&nbsp;
          {todo.text}&nbsp;&nbsp;
          {todo.done}&nbsp;&nbsp;
        </li>
      </ul>
    ));
    return todoRows;
  }

    return (
      <div className='usersummary'>
        <br />
        <div className='user-cards' style={{ justifyContent: "center", }}>
          <div id='ToDoList'>
            <h3 className='header-footer'>To Do List</h3>
            <Link to="/newtodo">Add New To Do</Link>
            <br />
            {
              props.todos.length ? TodoRows() : ( <h5 className='text-info'>No To Do List Items Yet</h5> )
            }
          </div>
          <br />
        </div>
        <br />
        <br />
      </div>
    );
}
export default UserSummary;   

这里有一些图片试图控制台记录错误。

[error][1]
[console.log][2]

[1]: https://i.stack.imgur.com/DjHnb.png
[2]: https://i.stack.imgur.com/uW6qk.png

Answer 1

createToken 可以返回错误，但它不会拒绝承诺，而是返回的令牌将为空。您必须像这样处理错误：

this.props.stripe.createToken({name : 'Name').then(({token, error}) => {
  if (error) {
    // handle error
  } else {
    // handle token
  }
});

如果你这样做了，你应该能够找到潜在的错误。