javascript - 流星反应教程 - 运行流星删除不安全后“更新失败：访问被拒绝”

问题描述

我一直在关注本教程，并且遇到了一些问题，但我能够自己解决所有问题 - 但现在我已经到了这一点。我运行了“流星删除不安全”，我很确定我正确更新了我的 tasks.js 以反映我的流星方法。我更改了 main.js 和 TaskForm.jsx 和 App.jsx 上的导入

编辑 ** 我收到的错误未显示在 vsCode 中，错误仅显示在控制台中。但是，有趣的是，如果您查看我的方法，您会看到警告消息应该显示“未授权”，但是控制台中出现的警告显示“更新失败：访问被拒绝”

我的大部分变量的名称与教程中的完全相同，有些则不是……这可能在学习过程中增加了一层混乱……例如，我有任务、任务、任务列表和任务列表，都是不同的变量......我知道我应该让那些更清晰，只是想让它现在“工作”。

任务.js：

import { Mongo } from 'meteor/mongo';
import { check } from 'meteor/check';

export const Tasks = new Mongo.Collection('taskList');

Meteor.methods({
  'taskList.insert'(text) {
    check(text, String);

    if (!this.userId) {
      throw new Meteor.Error('Not authorized.');
    }

    Tasks.insert({
      text,
      createdAt: new Date,
      owner: this.userId,
      username: Meteor.users.findOne(this.userId).username
    })
  },

  'taskList.remove'(taskId) {
    check(taskId, String);

    if (!this.userId) {
      throw new Meteor.Error('Not authorized.');
    }

    Tasks.remove(taskId);
  },

  'taskList.setChecked'(taskId, isChecked) {
    check(taskId, String);
    check(isChecked, Boolean);

    if (!this.userId) {
      throw new Meteor.Error('Not authorized.');
    }

    Tasks.update(taskId, {
      $set: {
        isChecked
      }
    });
  }
});

应用程序.jsx：

import React, { useState } from 'react';
import { useTracker } from 'meteor/react-meteor-data';
import _ from 'lodash';
import { Task } from './Task';
import { Tasks } from '/imports/api/tasks';
import { TaskForm } from './TaskForm';
import { LoginForm } from './LoginForm';

const toggleChecked = ({ _id, isChecked }) => {
  Tasks.update(_id, {
    $set: {
      isChecked: !isChecked
    }
  })
};

const deleteTask = ({ _id }) => Tasks.remove(_id);

const logoutFunction = (e) => {
  Meteor.logout(e)
}

export const App = () => {
  const filter = {};

  const [hideCompleted, setHideCompleted] = useState(false);

   if (hideCompleted) {
    _.set(filter, 'isChecked', false);
  }

  const { tasksList, incompleteTasksCount, user } = useTracker(() => ({
    tasksList: Tasks.find(filter, { sort: { createdAt: -1 } }).fetch(),
    incompleteTasksCount: Tasks.find({ isChecked: { $ne: true }}).count(),
    user: Meteor.user(),
  }));

  if (!user) {
    return (
      <div className="simple-todos-react">
        <LoginForm/>
      </div>
    );
  }

  return (
    <div className="simple-todos-react">
      <button onClick ={logoutFunction}>Log Out</button>
      <h1>Flight List ({ incompleteTasksCount })</h1>

      <div className="filters">
        <label>
          <input
              type="checkbox"
              readOnly
              checked={ Boolean(hideCompleted) }
              onClick={() => setHideCompleted(!hideCompleted)}
          />
          Hide Completed
        </label>
      </div>
 
      <ul className="tasks">
        { tasksList.map(task1 => <Task 
              key={ task1._id }
              task={ task1 }
              onCheckboxClick={toggleChecked}
              onDeleteClick={deleteTask}/>) }
      </ul>

      <TaskForm user={user}/>
    </div>
  );
};

TaskForm.jsx：

import React, { useState } from 'react';
import { Tasks } from '/imports/api/tasks';

export const TaskForm = ({ user }) => {
  const [text, setText] = useState("");

  const handleSubmit = () => {
    if (!text) return;

    Tasks.insert({
      text: text.trim(),
      createdAt: new Date(),
      isChecked: false,
      owner: user._id,
    });

    setText("");
  };

  return (
    <form className="task-form" onSubmit={handleSubmit}>
      <input
        type="text"
        placeholder="Type to add new tasks"
        value={text}
        onChange={(e) => setText(e.target.value)}
      />

      <button type="submit">Add Task</button>
    </form>
  );
};

主.js：

import { Meteor } from 'meteor/meteor';
import { Tasks } from '/imports/api/tasks';
function insertTask({ text }) {
  Tasks.insert({text});
}

Meteor.startup(() => {
    if (!Accounts.findUserByUsername('meteorite')) {
    Accounts.createUser({
      username: 'meteorite',
      password: 'password'
    });
  }
  
  if (Tasks.find().count() === 0) { //this is for basic data that will never render once app is live. 
    [
      {text:'updated THE Firstttt Task again this wont show'},
      {text:'the Second Task'},
      {text:'update 1 Third Task'},
      {text:'Fourth Task'},
      {text:'Fifth Task'},
      {text:'Sixth Task'},
      {text:'Seventh Task'}
    ].forEach(eachTask=>{insertTask(eachTask)})
  }

});

任务.jsx：

import React from 'react';
import classnames from 'classnames';

export const Task = ({ task, onCheckboxClick, onDeleteClick  }) => {
  const classes = classnames('task', {
    'checked': Boolean(task.isChecked)
  });
 
  return (
    <li className={classes}>
      <button onClick={ () => onDeleteClick(task) }>&times;</button>
      <span>{ task.text }</span>
      <input
        type="checkbox"
        checked={ Boolean(task.isChecked) }
        onClick={ () => onCheckboxClick(task) }
        readOnly
      />
    </li>
  );
};

标签： javascriptreactjsmongodbmeteorgalaxy

javascript - 流星反应教程 - 运行流星删除不安全后“更新失败：访问被拒绝”

问题描述

解决方案

推荐阅读