从 fetch 内部的外部 filter() 函数返回的访问值答案

【问题标题】：Access value returned from outer filter() funciton inside fetch从 fetch 内部的外部 filter() 函数返回的访问值
【发布时间】：2021-10-26 13:21:44
【问题描述】：

我想访问从 fetch 属性内的外部函数返回的值。该值正在被注销，但我需要在 'title' 属性中获取 fetch 中的值。如果这是一个无关紧要的问题，请原谅，我是新手。需要解决方案或替代方案。

button.addEventListener('click', (e) => {
function editTodo(e) {
  function filterID() {
    Array.from(todoItem).filter((item) => {
      if (item.getAttribute('id') == todoID) {
        console.log(item.innerHTML);
        return item.innerHTML;
      }
    });
  }      //<<value is being logged out

  fetch(`${url}/${id}`, {
    method: 'PATCH',
    headers: {
      'Content-Type': 'application/json',
    },
    body: JSON.stringify({ 
      title: filterID(),   //<<need to access here
    }),
  })
    .then((res) => {
        setMessage('Updated');
        return res.json();
    })
    .catch((error) => console.log(error));
}
})

【问题讨论】：

你没有对filter 创建的数组做任何事情，所以return item.innerHTML; 毫无意义——返回的值放在你从不使用的数组中。（传统函数从不隐含return，并且在您的filterID 函数中没有return，只有filter 回调。）我完全不清楚您需要或想要filter。 todoItem 是什么？
它是一个 html 元素数组，我正在返回与 if 条件匹配的元素的 innerHTML。有没有办法可以改进它，以便可以在外部访问该值？跨度>
你永远不会打电话给editTodo。

标签： javascript function filter scope fetch

【解决方案1】：

我发现了几个问题：

你没有对filter 创建的数组做任何事情，所以return item.innerHTML; 没有做任何事情——返回的值放在你从不使用的数组中。（传统函数从不做隐式return，而且你的filterID 函数中没有return，只有filter 回调。）
你永远不会打电话给editTodo。
从 cmets 看来，您有一个 HTML 元素的集合/列表，并且您正试图找到与 todoID 匹配的元素，并在 fetch 调用中使用它的 innerHTML。如果是这样，那将是 find 操作，而不是 filter 操作。

见 cmets：

button.addEventListener("click", (e) => {
    // Where is `editTodo` used??
    function editTodo(e) {
        // `todoItem` really should be plural if it"s a collection/list/array
        // Use `find` to find the matching `todo`, and then use `innerHTML` on it
        const todo = Array.from(todoItem).find((item) => item.getAttribute("id") === todoID);
        if (!todo) {
            return; // Not found
        }

        fetch(`${url}/${id}`, {
            method: "PATCH",
            headers: {
                "Content-Type": "application/json",
            },
            body: JSON.stringify({
                title: todo.innerHTML, // ***
            }),
        })
            .then((res) => {
                setMessage("Updated");
                return res.json();
            })
            .catch((error) => console.log(error));
    }
});

或者在todoItem 上使用for-of 循环，因为NodeList（来自querySelectorAll）和HTMLCollection（来自getElementsByXYZ 方法）都是可迭代的（就像数组一样）：

button.addEventListener("click", (e) => {
    // Where is `editTodo` used??
    function editTodo(e) {
        // `todoItem` really should be plural if it"s a collection/list/array
        // Use `find` to find the matching `todo`, and then use `innerHTML` on it
        let todo = null;
        for (const item of todoItem) {
            if (item.getAttribute("id") === todoID) {
                todo = item;
                break;
            }
        }
        if (!todo) {
            return; // Not found
        }

        // ...same otherwise...
    }
});

【讨论】：