Javascript 流星反应教程-“；更新失败：访问被拒绝"；运行流星后消除不安全

我一直在遵循教程，我一直有一些问题，但我能够自己解决所有问题-但现在我已经到了这一点。我运行了“meteor remove Unsecure”，我非常确定我正确地更新了tasks.js以反映meteor方法。我更改了main.js、TaskForm.jsx和App.jsx上的导入

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

我的大多数变量的命名与教程中的完全相同，有些变量不是。。。这可能会给学习过程增加一层混乱。。。例如，我有任务、任务、任务列表和任务列表，它们都是不同的变量。。。我知道我应该让这些内容更清晰，只是暂时让它“起作用”

tasks.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
      }
    });
  }
}); 

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

// export default new Mongo.Collection('taskList');
export const Tasks = new Mongo.Collection('tasks');
 
Meteor.methods({
  'tasks.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
    })
  },
 
  'tasks.remove'(taskId) {
    check(taskId, String);
 
    if (!this.userId) {
      throw new Meteor.Error('Not authorized.');
    }
 
    Tasks.remove(taskId);
  },
 
  'tasks.setChecked'(taskId, isChecked) {
    check(taskId, String);
    check(isChecked, Boolean);
 
    if (!this.userId) {
      throw new Meteor.Error('Not authorized.');
    }
 
    Tasks.update(taskId, {
      $set: {
        isChecked
      }
    });
  }
});

App.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>
  );
};

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 }) => Meteor.call('tasks.setChecked', _id)
const deleteTask = ({ _id }) => Meteor.call('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>
  );
};

Task.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>
  );
};

从“React”导入React；
从“类名称”导入类名称；
导出常量任务=（{Task，onCheckboxClick，onDeleteClick}）=>{
常量类=类名（'任务'{
“选中”：布尔值（task.isChecked）
});
返回(

onDeleteClick（task）}>&次；
{task.text}
onCheckboxClick（任务）}
只读
/>

);
};

我想我已经解决了一些问题，但仍然存在一些问题。这些是我的方法

tasks.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
      }
    });
  }
}); 

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

// export default new Mongo.Collection('taskList');
export const Tasks = new Mongo.Collection('tasks');
 
Meteor.methods({
  'tasks.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
    })
  },
 
  'tasks.remove'(taskId) {
    check(taskId, String);
 
    if (!this.userId) {
      throw new Meteor.Error('Not authorized.');
    }
 
    Tasks.remove(taskId);
  },
 
  'tasks.setChecked'(taskId, isChecked) {
    check(taskId, String);
    check(isChecked, Boolean);
 
    if (!this.userId) {
      throw new Meteor.Error('Not authorized.');
    }
 
    Tasks.update(taskId, {
      $set: {
        isChecked
      }
    });
  }
});

以上就是我的方法。 下面是我对这些方法的调用。 唯一有效的方法是删除。 你知道为什么其他人错了吗

App.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>
  );
};

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 }) => Meteor.call('tasks.setChecked', _id)
const deleteTask = ({ _id }) => Meteor.call('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>
  );
};

import React，{useState}来自“React”；
从“流星/反应流星数据”导入{useTracker}；
从“lodash”进口；
从“/Task”导入{Task}；
从'/imports/api/Tasks'导入{Tasks}；
从“/TaskForm”导入{TaskForm}；
从“./LoginForm”导入{LoginForm}；
const-toggleChecked=（{u-id}）=>Meteor.call（'tasks.setChecked'，u-id）
constdeleteTask=（{u id}）=>Meteor.call（'tasks.remove'，u id）；
常量logoutFunction=（e）=>{
流星注销（e）
}
导出常量应用=（）=>{
常量过滤器={}；
const[hideCompleted，setHideCompleted]=useState（false）；
如果（隐藏完成）{
_.set（过滤器'isChecked'，false）；
}
const{tasksList，incompleteTasksCount，user}=useTracker（（）=>({
tasksList:Tasks.find（筛选器，{sort:{createdAt:-1}）.fetch（），
IncompleteTaskScont:Tasks.find（{isChecked:{$ne:true}}）.count（），
用户：Meteor.user（），
}));
如果（！用户）{
返回(
);
}
返回(
注销
航班列表（{IncompleteTaskScont}）
setHideCompleted（！hideCompleted）}
/>
隐藏完成

{tasksList.map（task1=>）}

);
};

同样地，函数deleteTask按预期工作。 但是，function toggleChecked给了我以下错误：

errorClass{消息：“匹配错误：预期布尔值，未定义”，路径：，，清理错误：errorClass，errorType:“匹配.错误”，堆栈：“错误：匹配错误：预期布尔值，未定义…ea528700c66dd42ddcc29ef7434e9e62b909dc14:3833:16）”}错误类型：“匹配.错误”消息：“匹配错误：预期布尔值，未定义”路径：“SanitizeError:errorClass{isClientSafe:true，错误：400，原因：“匹配失败”，详细信息：未定义，消息：“匹配失败[400]”，…}堆栈：“错误：匹配错误：预期布尔值，未定义↵ 核对(http://localhost:3000/packages/check.js?hash=75acf7c24e10e7b3e7b30bb8ecc775fd34319ce5:76:17)↵ 在MethodInvocation.tasks.setChecked处(http://localhost:3000/app/app.js?hash=7e0d6e119e929408da1c048d1448a91b43b1a759:55:5)↵ 在http://localhost:3000/packages/ddp-client.js？hash=5333e09ab08c9651b0cc016f95813ab4ce075f37:976:25↵ 在Meteor.EnvironmentVariable.EVp.withValue(http://localhost:3000/packages/meteor.js?hash=857dafb4b9dff17e29ed8498a22ea5b1a3d6b41d:1207:15)↵ 在连接处。应用(http://localhost:3000/packages/ddp-client.js？hash=5333E09AB08C9651B0CC016F95813AB4CE0075F37:967:60）↵ 接通电话(http://localhost:3000/packages/ddp-client.js？hash=5333E09AB08C9651B0CC016F95813AB4CE0075F37:869:17）↵ 在切换时检查(http://localhost:3000/app/app.js?hash=7e0d6e119e929408da1c048d1448a91b43b1a759:149:17)↵ 马上(http://localhost:3000/app/app.js?hash=7e0d6e119e929408da1c048d1448a91b43b1a759:318:20)↵ 在HtmlUnknowneElement.callCallback(http://localhost:3000/packages/modules.js?hash=ea528700c66dd42ddcc29ef7434e9e62b909dc14:3784:14)↵ 在Object.invokeGuardedCallbackDev(http://localhost:3000/packages/modules.js?hash=ea528700c66dd42ddcc29ef7434e9e62b909dc14:3833:16)“proto：错误

已完全回答

已将my TaskForm.jsx提交函数更新为：

  const handleSubmit = () => {
    if (!text) return;
Meteor.call('tasks.insert',text)
  };

并将my App.jsx更新为：

const toggleChecked = ({ _id, isChecked }) => Meteor.call('tasks.setChecked', _id, isChecked)
const deleteTask = ({ _id }) => Meteor.call('tasks.remove',_id);

---

可能是因为我没有给任何地方打过电话吗？但我该怎么称呼它呢？天哪，我知道了！那是因为我打错了电话。指南告诉你更新导入frmo tasks.js，但它没有说更新任务。删除到Meteor.Call（'method'，parameter）我自己得到的！！！！！！！嗨，你能解释一下吗，或者你能分享一下代码吗？我也有同样的问题