为什么我的对象显示为未定义，但它存在！反应原生

Question

我通过 react-redux 调用一个对象数组并将它们设置为等于 programList，在更高级别的组件上然后将其传递到这里，我通过 find() 将找到的对象 id 设置为一个变量，我正在尝试控制台记录信息。

当我调用 programList 时，它很好，有时当我调用 selectedProgram 时，它会显示为未定义，已经很奇怪，因为我上周从未发生过这种情况。

问题在于，当我只想测试是否可以使用 selectedProgram.title 从单个返回的对象（selectedProgram）中获取标题时，我得到了未定义的结果，而当我执行 Object.keys 时（我得到了未定义的结果）。

我尝试将它放入一个新的承诺中，它会起作用，但我也收到了一个未解决的承诺警告。但是我很迷茫，因为我没有更改此特定代码，但它不起作用。

20:23:32: Incoming Program Id:  5e8860c0-cbe7-11e8-bca0-b7f8a21d1c09
20:23:32: 5e8860c0-cbe7-11e8-bca0-b7f8a21d1c09 5e8860c0-cbe7-11e8-bca0-b7f8a21d1c09

const Workout = ({ programList, programId }) => {
  // find the correct programlist with same id as navId for mapping
  const selectedProgram = programList.find(index => {
    if (index.id === programId) {
      console.log(programId, index.id);
      return index;
    }
  });

  // const workoutListArr = selectedProgram;
  console.log("this is the original list", programList);
  console.log("this is object: ", selectedProgram);
  console.log("this is here: ", selectedProgram.title);

20:21:43: this is the original list Array [
20:21:43:   Object {
20:21:43:     "description": "description",
20:21:43:     "difficulty": "#FFDF00",
20:21:43:     "id": "0e772ff0-c785-11e8-92f8-274c004a8b60",
20:21:43:     "title": "Shrug",
20:21:43:     "workouts": Array [
20:21:43:       Object {
20:21:43:         "description": "description",
20:21:43:         "difficulty": "#FFDF00",
20:21:43:         "id": "15618310-c785-11e8-92f8-274c004a8b60",
20:21:43:         "title": "YouTube",
20:21:43:         "workouts": Array [],
20:21:43:       },
20:21:43:       Object {
20:21:43:         "description": "description",
20:21:43:         "difficulty": "#d9534f",
20:21:43:         "id": "189a18d0-c785-11e8-92f8-274c004a8b60",
20:21:43:         "title": "Empty Title",
20:21:43:         "workouts": Array [],
20:21:43:       },
20:21:43:     ],
20:21:43:   },
20:21:43:   Object {
20:21:43:     "description": "Master",
20:21:43:     "difficulty": "#FFDF00",
20:21:43:     "id": "5e8860c0-cbe7-11e8-bca0-b7f8a21d1c09",
20:21:43:     "title": "Red",
20:21:43:     "workouts": Array [
20:21:43:       Object {
20:21:43:         "description": "It",
20:21:43:         "difficulty": "#FFDF00",
20:21:43:         "id": "e1ab31d0-cbf1-11e8-aaa1-3fb0ac98f560",
20:21:43:         "title": "Redd",
20:21:43:         "workouts": Array [],
20:21:43:       },
20:21:43:       Object {
20:21:43:         "description": "World ",
20:21:43:         "difficulty": "#FFDF00",
20:21:43:         "id": "20cf8930-cc1d-11e8-8d7e-172d4a63fd8f",
20:21:43:         "title": "Hello",
20:21:43:         "workouts": Array [],
20:21:43:       },
20:21:43:     ],
20:21:43:   },
20:21:43: ]
20:21:43: this is object:  undefined

Answer 1

Array.prototype.find 的工作方式略有不同。为每个项目调用回调并返回第一个为 true 的项目

var programList = [{id: "1"},{id:"2"}];

(( programList, programId ) => {

console.log(programId);

  // find the correct programlist with same id as navId for mapping
  const selectedProgram = programList.find(index => {
    if (index.id === programId) {
      console.log(programId, index.id);
      return true;
    }
     return false;
  });

  console.log(selectedProgram);

})(programList, "2")