React Context API中addNote方法参数索引错位问题求助

这种参数错位的问题，本质就是方法定义的参数顺序和实际调用时传入的参数顺序不匹配，直接按下面的步骤排查修复就行：

• 先查Context里addNote方法的定义：确认参数列表的顺序，比如你是不是把方法定义成了addNote(title, description, id)，但实际需要的是addNote(id, title, description)？
• 再检查所有调用addNote的组件：比如你调用的时候传的是addNote(noteTitle, noteDesc, noteId)，但方法定义的顺序是(id, title, description)，这就会导致第一个参数id拿到的是title的值，第二个参数title拿到的是description的值。

举个修复的例子：

错误的定义/调用：

// Context里的错误定义
const addNote = (title, description, id) => {
  console.log(id); // 这里输出的是title的值
  console.log(title); // 这里输出的是description的值
}

// 组件里的错误调用
addNote("笔记标题", "笔记内容", "123");

修复后：

// Context里修正参数顺序
const addNote = (id, title, description) => {
  console.log(id); // 输出"123"
  console.log(title); // 输出"笔记标题"
}

// 组件里按定义顺序传参
addNote("123", "笔记标题", "笔记内容");

另外给个实用建议：如果参数数量超过2个，最好改用对象传参，彻底避免顺序问题，比如：

// Context里的定义
const addNote = ({ id, title, description }) => {
  console.log(id, title, description); // 参数顺序不影响，按key取值
}

// 组件里的调用
addNote({
  id: "123",
  title: "笔记标题",
  description: "笔记内容"
});

内容的提问来源于stack exchange，提问作者Zaidi