Блог

Иногда мне все еще трудно понять, когда или когда не использовать оператор return . Недавно я столкнулся с проблемой в моем коде ReactJS. По сути, я получаю html из вызова выборки, а затем устанавливаю его как innerHTML элемента. Мне нужно немного изменить эти данные после их установки.

Когда это не работает:

   useEffect(()=>{
    setHeaderFooter(props.data.header,props.data.footer, changeLinks)
  }, [props.data.header,props.data.footer])

  const changeLinks = ()=>{
    $(document).find('nav.navbar a[href*="/oc"]').each(function (index, element) {
      var original = $(element).attr('href');
      var final = process.env.REACT_APP_PLATFORM_URL   original;
      $(element).attr('href', final);
  });
  
  // Adds the first letter of the users name as the icon in header.
      $('#firstLetter').text()
      $('#firstLetterLink').text().charAt(0).toUpperCase()
  }

export const setHeaderFooter=(head,foot, callback) =>{
    let header = document.querySelector('#header')
    let footer = document.querySelector('#footer')
    header.innerHTML = head, footer.innerHTML = foot
   return callback()
}
 

Когда это работает (без этапа модификации в конце):

   useEffect(()=>{
    setHeaderFooter(props.data.header,props.data.footer)
  }, [props.data.header,props.data.footer])

  const changeLinks = ()=>{
    $(document).find('nav.navbar a[href*="/oc"]').each(function (index, element) {
      var original = $(element).attr('href');
      var final = process.env.REACT_APP_PLATFORM_URL   original;
      $(element).attr('href', final);
  });
  
  // Adds the first letter of the users name as the icon in header.
      $('#firstLetter').text()
      $('#firstLetterLink').text().charAt(0).toUpperCase()
  }

export const setHeaderFooter=(head,foot) =>{
    let header = document.querySelector('#header')
    let footer = document.querySelector('#footer')
    return header.innerHTML = head, footer.innerHTML = foot
}
 

Может кто-нибудь дать мне объяснение относительно того, что здесь происходит. Я хочу лучше понять оператор return.

Проблема заключается в запятой, используемой между header и footer присваиванием:

Измените это:

 header.innerHTML = head, footer.innerHTML = foot
return callback()
 

К этому:

 header.innerHTML = head;
footer.innerHTML = foot;
return callback();
 

Чтобы объяснить проблему, обратитесь к документам MDN:

Оператор запятой (,) вычисляет каждый из своих операндов (слева направо) и возвращает значение последнего операнда

В вашем случае footer.innerHTML = foot это последний операнд, и он будет возвращен, но поскольку вы ничему не присваиваете возвращаемое значение, оно пропадает впустую и, следовательно, вы получаете ошибку lint. Подробнее об ошибке lint можно прочитать в разделе Запретить неиспользуемые выражения (no-unused-expressions).