问:
Change side bar's
 color on scroll
How to make left sticky sidebars li's background color to change on scrolling?

 If I scroll through BMW then BMW's background color on the sidebar should be green.
Please see the code snippet below.

So li's should have the same background as on click event but when we scroll.
Any help would be appreciated. Thank you in advance.

var $ = jQuery;
$(document).on('click', '.car-category-link', function () {
    var this_id = $(this).data('id');

    var gotom = setInterval(function () {
        restaurant_go_to_navtab(this_id);
        clearInterval(gotom);
    }, 400);

    $('.car-list li').removeClass('active');
    $(this).parent().addClass('active');
});

function restaurant_go_to_navtab(id) {
    var scrolling_div = $('#car-category-' + id);

    $('html, body').animate({
        scrollTop: scrolling_div.offset().top
    }, 500);
}```
<pre class="snippet-code-html lang-html prettyprint-override"><code><!DOCTYPE html>
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<style>
body {
  margin: 0;
}
ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  width: 25%;
  background-color: #f1f1f1;
  position: fixed;
  height: 100%;
  overflow: auto;
}
li a {
  display: block;
  color: #000;
  padding: 8px 16px;
  text-decoration: none;
}
 .car-list .active {
  background-color: #4CAF50;
  color: white;
}
.table {
margin-left:25%;padding:1px 16px;height:1000px;
}
input {width:400px}
</style>
</head>
<body>

<ul class="car-list">
<li class="active"> Honda </li>
<li class=""> BMW </li>
<li class=""> Mercedes</li>
<li class=""> Volvo </li>
<li class=""> Main Course </li>
<li class=""> Jeep </li>
<li class=""> Buggati </li>
<li class=""> Ferrari </li>
<li class=""> Audi </li>
</ul>

<div class="table">
<div class="sticky-search" style="position: fixed; top: 50px;">
<input  placeholder="when the title is close to me then change li's background">
</div>
   <div class="element-title" id="car-category-0">
<h2 class="text-color">Honda</h2>
<span></span>
</div>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
   <div class="element-title" id="car-category-1">
<h2 class="text-color">BMW</h2>
<span></span>
</div>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
   <div class="element-title" id="car-category-2">
<h2 class="text-color">Mercedes</h2>
<span></span>
</div>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
   <div class="element-title" id="car-category-3">
<h2 class="text-color">Volvo</h2>
<span></span>
</div>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
   <div class="element-title" id="car-category-4">
<h2 class="text-color">Jeep</h2>
<span></span>
</div>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
   <div class="element-title" id="car-category-5">
<h2 class="text-color">Buggati</h2>
<span></span>
</div>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
   <div class="element-title" id="car-category-6">
<h2 class="text-color">Ferrari</h2>
<span></span>
</div>
  <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
   <div class="element-title" id="car-category-7">
<h2 class="text-color">Audi</h2>
<span></span>
</div>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
</div>
</body>
</html></code>```

答:
So, I came up with a solution. First off all, you have to correct your categories. There was a mismatch. You pressed "Volvo" and it went to "Mercedes".

So what I did is, create an event listener when the user finished their scrolling. Then check which headline is still visible in our view. We start with the first headline and check each one. The one that is getting found first, will be our new element which is going to be active. (I am only searching for headlines, not the main text. Sometimes the main text can still be visible, however the active li will be the next headline. You can change that very easy if necesarry, let me know then)

Then after fetching the headline that is still visible, set the active class for the li element. I added id for all of them to add the class.

var $ = jQuery;
$(document).on('click', '.car-category-link', function () {
    var this_id = $(this).data('id');

    var gotom = setInterval(function () {
        restaurant_go_to_navtab(this_id);
        clearInterval(gotom);
    }, 400);

    $('.car-list li').removeClass('active');
    $(this).parent().addClass('active');
});

function restaurant_go_to_navtab(id) {
    var scrolling_div = $('#car-category-' + id);

    $('html, body').animate({
        scrollTop: scrolling_div.offset().top
    }, 500);
}

function isScrolledIntoView(elem)
{
    var docViewTop = $(window).scrollTop();
    var docViewBottom = docViewTop + $(window).height();

    var elemTop = $(elem).offset().top;
    var elemBottom = elemTop + $(elem).height();

    return ((elemBottom <= docViewBottom) && (elemTop >= docViewTop));
}

//Fetch scrolling event

var isScrolling;
window.addEventListener('scroll', function ( event ) {

 window.clearTimeout( isScrolling );

  isScrolling = setTimeout(function() {

   var active = 0;

    //Fetch the active element
  for(var i = 0; i < 8; i++)
    {
      if (isScrolledIntoView($("#car-category-"+i)))
      {
        $('.car-list li').removeClass('active');
        $("#car-link-"+i).parent().addClass('active');

        return;
      }
    }

 }, 66);

}, false);```
<pre class="snippet-code-css lang-css prettyprint-override"><code>body {
  margin: 0;
}

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  width: 25%;
  background-color: #f1f1f1;
  position: fixed;
  height: 100%;
  overflow: auto;
}

li a {
  display: block;
  color: #000;
  padding: 8px 16px;
  text-decoration: none;
}

 .car-list .active {
  background-color: #4CAF50;
  color: white;
}

.table {
  margin-left:25%;padding:1px 16px;height:1000px;
}</code>```

 Honda

 BMW

 Mercedes

 Volvo

 Jeep

 Buggati

 Ferrari

 Audi

Honda

Also notice that we have set overflow:auto to sidenav. This will add a scrollbar

BMW

Also notice that we have set overflow:auto to sidenav. This will add a scrollbar

Mercedes

Also notice that we have set overflow:auto to sidenav. This will add a scrollbar

Volvo

Also notice that we have set overflow:auto to sidenav. This will add a scrollbar

Jeep

Also notice that we have set overflow:auto to sidenav. This will add a scrollbar

Buggati

Also notice that we have set overflow:auto to sidenav. This will add a scrollbar

Ferrari

Also notice that we have set overflow:auto to sidenav. This will add a scrollbar

Audi

Also notice that we have set overflow:auto to sidenav. This will add a scrollbar

```

I used their scrolling script and the accepted answer here. Thanks to them

Title: Change side bar's <li> color on scroll

Body:
How to make left sticky sidebars li's background color to change on scrolling?

 If I scroll through BMW then BMW's background color on the sidebar should be green.
Please see the code snippet below.

So li's should have the same background as on click event but when we scroll.
Any help would be appreciated. Thank you in advance.

var $ = jQuery;
$(document).on('click', '.car-category-link', function () {
    var this_id = $(this).data('id');

    var gotom = setInterval(function () {
        restaurant_go_to_navtab(this_id);
        clearInterval(gotom);
    }, 400);

    $('.car-list li').removeClass('active');
    $(this).parent().addClass('active');
});

function restaurant_go_to_navtab(id) {
    var scrolling_div = $('#car-category-' + id);

    $('html, body').animate({
        scrollTop: scrolling_div.offset().top
    }, 500);
}

<!DOCTYPE html>

 Honda

 BMW

 Mercedes

 Volvo

 Main Course

 Jeep

 Buggati

 Ferrari

 Audi

<input  placeholder="when the title is close to me then change li's background">

Honda

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.

BMW

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.

Mercedes

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.

Volvo

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.

Jeep

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.

Buggati

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.

Ferrari

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.

Audi

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.

Body:
So, I came up with a solution. First off all, you have to correct your categories. There was a mismatch. You pressed "Volvo" and it went to "Mercedes".

So what I did is, create an event listener when the user finished their scrolling. Then check which headline is still visible in our view. We start with the first headline and check each one. The one that is getting found first, will be our new element which is going to be active. (I am only searching for headlines, not the main text. Sometimes the main text can still be visible, however the active li will be the next headline. You can change that very easy if necesarry, let me know then)

Then after fetching the headline that is still visible, set the active class for the li element. I added id for all of them to add the class.

var $ = jQuery;
$(document).on('click', '.car-category-link', function () {
    var this_id = $(this).data('id');

    var gotom = setInterval(function () {
        restaurant_go_to_navtab(this_id);
        clearInterval(gotom);
    }, 400);

    $('.car-list li').removeClass('active');
    $(this).parent().addClass('active');
});

function restaurant_go_to_navtab(id) {
    var scrolling_div = $('#car-category-' + id);

    $('html, body').animate({
        scrollTop: scrolling_div.offset().top
    }, 500);
}

function isScrolledIntoView(elem)
{
    var docViewTop = $(window).scrollTop();
    var docViewBottom = docViewTop + $(window).height();

    var elemTop = $(elem).offset().top;
    var elemBottom = elemTop + $(elem).height();

    return ((elemBottom <= docViewBottom) && (elemTop >= docViewTop));
}

//Fetch scrolling event

var isScrolling;
window.addEventListener('scroll', function ( event ) {

 window.clearTimeout( isScrolling );

  isScrolling = setTimeout(function() {

   var active = 0;

    //Fetch the active element
  for(var i = 0; i < 8; i++)
    {
      if (isScrolledIntoView($("#car-category-"+i)))
      {
        $('.car-list li').removeClass('active');
        $("#car-link-"+i).parent().addClass('active');

        return;
      }
    }

 }, 66);

}, false);

body {
  margin: 0;
}

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  width: 25%;
  background-color: #f1f1f1;
  position: fixed;
  height: 100%;
  overflow: auto;
}

li a {
  display: block;
  color: #000;
  padding: 8px 16px;
  text-decoration: none;
}

 .car-list .active {
  background-color: #4CAF50;
  color: white;
}

.table {
  margin-left:25%;padding:1px 16px;height:1000px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul class="car-list">
  <li class="active"><a href="javascript:void(0)" class="car-category-link" id="car-link-0" data-id="0"> Honda </a></li>
  <li class=""><a href="javascript:void(0)" class="car-category-link" id="car-link-1" data-id="1"> BMW </a></li>
  <li class=""><a href="javascript:void(0)" class="car-category-link" id="car-link-2" data-id="2"> Mercedes</a></li>
  <li class=""><a href="javascript:void(0)" class="car-category-link" id="car-link-3" data-id="3"> Volvo </a></li>
  <li class=""><a href="javascript:void(0)" class="car-category-link" id="car-link-4" data-id="4"> Jeep </a></li>
  <li class=""><a href="javascript:void(0)" class="car-category-link" id="car-link-5" data-id="5"> Buggati </a></li>
  <li class=""><a href="javascript:void(0)" class="car-category-link" id="car-link-6" data-id="6"> Ferrari </a></li>
  <li class=""><a href="javascript:void(0)" class="car-category-link" id="car-link-7" data-id="7"> Audi </a></li>
</ul>

<div class="table">

 <div class="element-title" id="car-category-0">
<h2 class="text-color">Honda</h2>
<span></span>
</div>
  <p>Also notice that we have set overflow:auto to sidenav. This will add a scrollbar</p>
   <div class="element-title" id="car-category-1">
<h2 class="text-color">BMW</h2>
<span></span>
</div>
  <p>Also notice that we have set overflow:auto to sidenav. This will add a scrollbar</p>
   <div class="element-title" id="car-category-2">
<h2 class="text-color">Mercedes</h2>
<span></span>
</div>
  <p>Also notice that we have set overflow:auto to sidenav. This will add a scrollbar</p>
   <div class="element-title" id="car-category-3">
<h2 class="text-color">Volvo</h2>
<span></span>
</div>
  <p>Also notice that we have set overflow:auto to sidenav. This will add a scrollbar</p>
   <div class="element-title" id="car-category-4">
<h2 class="text-color">Jeep</h2>
<span></span>
</div>
  <p>Also notice that we have set overflow:auto to sidenav. This will add a scrollbar</p>

   <div class="element-title" id="car-category-5">
<h2 class="text-color">Buggati</h2>
<span></span>
</div>
  <p>Also notice that we have set overflow:auto to sidenav. This will add a scrollbar</p>
   <div class="element-title" id="car-category-6">
<h2 class="text-color">Ferrari</h2>
<span></span>
</div>
  <p>Also notice that we have set overflow:auto to sidenav. This will add a scrollbar</p>
   <div class="element-title" id="car-category-7">
<h2 class="text-color">Audi</h2>
<span></span>
</div>
  <p>Also notice that we have set overflow:auto to sidenav. This will add a scrollbar</p>
</div>

I used their scrolling script and the accepted answer here. Thanks to them


来源: stackexchange

问:
ReactJS Working with API calls - data changes everytime I use a component
For my project I'm using data from https://api.randomuser.me/ which basically returns a random person every time you fetch the data.

I've created a component (for the purpose of the question I've simplified it) that returns a first name of person fetched by the API. However, if I use the component twice I get two different names all the time. How can I reuse the component and customise it (using props etc.) while using the same dataset which then refreshes every 10 seconds as in the code below?

```<code>import React,{Component} from "react";
import { makeStyles } from '@material-ui/styles';
import Budgetdata from './Budgetdata.js'
import Caption from './Caption.js'

export default class Apicall extends Component {

    intervalID;
constructor(props) {

  super(props);

    this.state = {
      loading:true,
      person:[],
    random: 0,
    name:"name"};

    }

      async getdata () {

        const url = "https://api.randomuser.me/";
        const response = await fetch(url);
        const data = await response.json();
              var value = Math.round(Math.random())
        this.setState({ person: data.results[0],loading:false,random: value,name:"name"})

      }

      async componentDidMount() {

     this.getdata()

      this.intervalID = setInterval(this.getdata.bind(this), 10000);

      }

      async componentWillUnmount() {

        clearInterval(this.intervalID);
      }

      render = props =>  {

        if (this.state.loading || !this.state.person) {

          return (<div>loading..</div>)
        }
        else
        {

        return(

          <div>{this.state.person.name.first}</div>

        )
        }

      }

    }

</code>```

答:
Based on
https://www.valentinog.com/blog/await-react/
await is not well supported at the front end side. I will suggest you to use Axios libraries.

On the other hand, if you need to use a react component twice you could need to use the react component key field as told at:
https://blog.cloudboost.io/key-concept-and-its-necessities-in-react-component-885c18084e59

ContentLicense: CC BY-SA 4.0

Body:
For my project I'm using data from https://api.randomuser.me/ which basically returns a random person every time you fetch the data.

I've created a component (for the purpose of the question I've simplified it) that returns a first name of person fetched by the API. However, if I use the component twice I get two different names all the time. How can I reuse the component and customise it (using props etc.) while using the same dataset which then refreshes every 10 seconds as in the code below?

import React,{Component} from "react";
import { makeStyles } from '@material-ui/styles';
import Budgetdata from './Budgetdata.js'
import Caption from './Caption.js'

export default class Apicall extends Component {

    intervalID;
constructor(props) {

  super(props);

    this.state = {
      loading:true,
      person:[],
    random: 0,
    name:"name"};

    }

      async getdata () {

        const url = "https://api.randomuser.me/";
        const response = await fetch(url);
        const data = await response.json();
              var value = Math.round(Math.random())
        this.setState({ person: data.results[0],loading:false,random: value,name:"name"})

      }

      async componentDidMount() {

     this.getdata()

      this.intervalID = setInterval(this.getdata.bind(this), 10000);

      }

      async componentWillUnmount() {

        clearInterval(this.intervalID);
      }

      render = props =>  {

        if (this.state.loading || !this.state.person) {

          return (
loading..
)
        }
        else
        {

        return(

{this.state.person.name.first}

        )
        }

      }

    }


问:
Exception in HostFunction: Malformed calls from JS: field sizes are different - Problem occurs on real Device, not on Simulator
After a bunch of lines of code in the Expo/React Native Project, I wanted to test it on my iPhone. The first minute went well, until I got an unexpected Error Message:

Error: Exception in HostFunction: Malformed calls from JS: field sizes are different.

I had the Error during development several times because I stored a NaN somewhere accidentally. So far so good, happy that the Error Message came directly, I knew where to start to get rid of it.

Following is the Error:

```<code>[Unhandled promise rejection: Error: Exception in HostFunction: Malformed calls from JS: field sizes are different.]
Stack trace:
  node_modules/react-native/Libraries/BatchedBridge/MessageQueue.js:271:39 in enqueueNativeCall
  node_modules/react-native/Libraries/BatchedBridge/NativeModules.js:137:8 in fn
  node_modules/react-native/Libraries/Core/Timers/JSTimers.js:259:23 in setTimeout
  node_modules/promise/setimmediate/rejection-tracking.js:47:10 in <unknown>
  node_modules/promise/setimmediate/core.js:169:16 in reject
  node_modules/promise/setimmediate/core.js:211:11 in doResolve
  node_modules/promise/setimmediate/core.js:66:12 in Promise
  node_modules/react-native/Libraries/BatchedBridge/NativeModules.js:98:25 in fn
  node_modules/@unimodules/react-native-adapter/build/NativeModulesProxy.js:15:52 in _callee$
  node_modules/regenerator-runtime/runtime.js:45:44 in tryCatch
  node_modules/regenerator-runtime/runtime.js:271:30 in invoke
  node_modules/regenerator-runtime/runtime.js:45:44 in tryCatch
  node_modules/regenerator-runtime/runtime.js:135:28 in invoke
  node_modules/regenerator-runtime/runtime.js:170:17 in <unknown>
  node_modules/promise/setimmediate/core.js:45:7 in tryCallTwo
  node_modules/promise/setimmediate/core.js:200:23 in doResolve
  node_modules/promise/setimmediate/core.js:66:12 in Promise
  node_modules/regenerator-runtime/runtime.js:169:27 in callInvokeWithMethodAndArg
  node_modules/regenerator-runtime/runtime.js:192:38 in enqueue
  node_modules/regenerator-runtime/runtime.js:216:8 in <unknown>
  node_modules/@unimodules/react-native-adapter/build/NativeModulesProxy.js:10:62 in _callee
  node_modules/expo-file-system/build/FileSystem.js:50:55 in writeAsStringAsync$
  node_modules/regenerator-runtime/runtime.js:45:44 in tryCatch
  node_modules/regenerator-runtime/runtime.js:271:30 in invoke
  node_modules/regenerator-runtime/runtime.js:45:44 in tryCatch
  node_modules/regenerator-runtime/runtime.js:135:28 in invoke
  node_modules/regenerator-runtime/runtime.js:170:17 in <unknown>
  node_modules/promise/setimmediate/core.js:45:7 in tryCallTwo
  node_modules/promise/setimmediate/core.js:200:23 in doResolve
  node_modules/promise/setimmediate/core.js:66:12 in Promise
  node_modules/regenerator-runtime/runtime.js:169:27 in callInvokeWithMethodAndArg
  node_modules/regenerator-runtime/runtime.js:192:38 in enqueue
  node_modules/regenerator-runtime/runtime.js:216:8 in <unknown>
  node_modules/expo-file-system/build/FileSystem.js:46:7 in writeAsStringAsync
  node_modules/redux-persist-expo-filesystem/index.js:13:34 in writeFile
  node_modules/redux-persist-expo-filesystem/index.js:26:30 in <unknown>
  node_modules/promise/setimmediate/core.js:37:14 in tryCallOne
  node_modules/promise/setimmediate/core.js:123:25 in <unknown>
  node_modules/react-native/Libraries/Core/Timers/JSTimers.js:152:14 in _callTimer
  node_modules/react-native/Libraries/Core/Timers/JSTimers.js:200:17 in _callImmediatesPass
  node_modules/react-native/Libraries/Core/Timers/JSTimers.js:473:30 in callImmediates
  node_modules/react-native/Libraries/BatchedBridge/MessageQueue.js:337:6 in __callImmediates
  node_modules/react-native/Libraries/BatchedBridge/MessageQueue.js:135:6 in <unknown>
  node_modules/react-native/Libraries/BatchedBridge/MessageQueue.js:314:10 in __guard
  node_modules/react-native/Libraries/BatchedBridge/MessageQueue.js:134:17 in flushedQueue
</code>```

After starting the App multiple times, the Error occurs more often and after seconds of use. The redux-persist storage is the main problem. I cannot explain why it worked well (and is still working well) on the Simulator and on a real device it doesn't.

I tried multiple storage packages as 'redux-persist-expo-fs-storage', 'redux-persist/lib/storage' and 'redux-persist-expo-filesystem'. None of them did the work.

The redux/index.js file:

```<code>import { combineReducers, createStore, applyMiddleware } from 'redux';
import promiseMiddleware from 'redux-promise-middleware';
import { persistStore, persistReducer } from 'redux-persist';
import guidelines from './guidelines/reducers';
import global from './global/reducers';
import ExpoFileSystemStorage from 'redux-persist-expo-filesystem';
import { composeWithDevTools } from 'redux-devtools-extension';
const persistConfig = {
    key: 'root',
    keyPrefix:'',
    storage: ExpoFileSystemStorage,
    timeout: null
}
const reducers = combineReducers({
    global,
    guidelines,
})
const persistedReducer = persistReducer(persistConfig, reducers);
export const store = createStore(persistedReducer, composeWithDevTools(applyMiddleware(promiseMiddleware())));
export const persistor = persistStore(store);
</code>```

The function promiseMiddleware is used to handle the async action creators in redux as below axios is used to retrieve data in actions.js:

```<code>import axios from 'axios';
...
export const FETCH_AVAILABLE_GUIDELINES = 'FETCH_AVAILABLE_GUIDELINES';
export const FETCH_AVAILABLE_GUIDELINES_PENDING = 'FETCH_AVAILABLE_GUIDELINES_PENDING';
export const FETCH_AVAILABLE_GUIDELINES_FULFILLED = 'FETCH_AVAILABLE_GUIDELINES_FULFILLED';
export const FETCH_AVAILABLE_GUIDELINES_REJECTED = 'FETCH_AVAILABLE_GUIDELINES_REJECTED';
export const fetchAvailableGuidelines = () => {
    return {
        type: FETCH_AVAILABLE_GUIDELINES,
        payload: axios.get(CONFIG.API.ROOT + CONFIG.API.PATHS.OVERVIEW),
    }
};
...
</code>```

reducers.js

```<code>import { FETCH_AVAILABLE_GUIDELINES_FULFILLED } from './actions'
const initialState = () => {
    return {
        availableGuidelines: [],
        ...
    }
}
export default (state = initialState, action) => {
    switch(action.type) {
        case FETCH_AVAILABLE_GUIDELINES_FULFILLED:
             return {
                 ...state,
                 availableGuidelines: [...action.payload.data],
             }
        ...
    }
}
</code>```

Does anyone have the same Problem or a hint on how to debug my redux-persist storage. The data stored is a large JSON Object. I am sure that all keys have valid values.

Thanks for any advice and help.

Edit: My Guidelines are about 6MB each. If I fetch only one, it does not seem to crash. As soon as multiple guidelines are downloaded, it crashes. I believe it has to do with the storage system.

```<code>expo: 35.0
redux: ^4.0.1
redux-persist: ^5.10.0
</code>```

答:
If you are fetching this data on every app start and you don't care if this data is persisted offline, I would recommend using blacklist configuration of redux-persist to blacklist such large states from persisting.

If this state is static and not changing - you could also just write it to a JSON file and use that file as data source then.

Body:
After a bunch of lines of code in the Expo/React Native Project, I wanted to test it on my iPhone. The first minute went well, until I got an unexpected Error Message:

Error: Exception in HostFunction: Malformed calls from JS: field sizes are different.

I had the Error during development several times because I stored a NaN somewhere accidentally. So far so good, happy that the Error Message came directly, I knew where to start to get rid of it.

Following is the Error:

[Unhandled promise rejection: Error: Exception in HostFunction: Malformed calls from JS: field sizes are different.]
Stack trace:
  node_modules/react-native/Libraries/BatchedBridge/MessageQueue.js:271:39 in enqueueNativeCall
  node_modules/react-native/Libraries/BatchedBridge/NativeModules.js:137:8 in fn
  node_modules/react-native/Libraries/Core/Timers/JSTimers.js:259:23 in setTimeout
  node_modules/promise/setimmediate/rejection-tracking.js:47:10 in <unknown>
  node_modules/promise/setimmediate/core.js:169:16 in reject
  node_modules/promise/setimmediate/core.js:211:11 in doResolve
  node_modules/promise/setimmediate/core.js:66:12 in Promise
  node_modules/react-native/Libraries/BatchedBridge/NativeModules.js:98:25 in fn
  node_modules/@unimodules/react-native-adapter/build/NativeModulesProxy.js:15:52 in _callee$
  node_modules/regenerator-runtime/runtime.js:45:44 in tryCatch
  node_modules/regenerator-runtime/runtime.js:271:30 in invoke
  node_modules/regenerator-runtime/runtime.js:45:44 in tryCatch
  node_modules/regenerator-runtime/runtime.js:135:28 in invoke
  node_modules/regenerator-runtime/runtime.js:170:17 in <unknown>
  node_modules/promise/setimmediate/core.js:45:7 in tryCallTwo
  node_modules/promise/setimmediate/core.js:200:23 in doResolve
  node_modules/promise/setimmediate/core.js:66:12 in Promise
  node_modules/regenerator-runtime/runtime.js:169:27 in callInvokeWithMethodAndArg
  node_modules/regenerator-runtime/runtime.js:192:38 in enqueue
  node_modules/regenerator-runtime/runtime.js:216:8 in <unknown>
  node_modules/@unimodules/react-native-adapter/build/NativeModulesProxy.js:10:62 in _callee
  node_modules/expo-file-system/build/FileSystem.js:50:55 in writeAsStringAsync$
  node_modules/regenerator-runtime/runtime.js:45:44 in tryCatch
  node_modules/regenerator-runtime/runtime.js:271:30 in invoke
  node_modules/regenerator-runtime/runtime.js:45:44 in tryCatch
  node_modules/regenerator-runtime/runtime.js:135:28 in invoke
  node_modules/regenerator-runtime/runtime.js:170:17 in <unknown>
  node_modules/promise/setimmediate/core.js:45:7 in tryCallTwo
  node_modules/promise/setimmediate/core.js:200:23 in doResolve
  node_modules/promise/setimmediate/core.js:66:12 in Promise
  node_modules/regenerator-runtime/runtime.js:169:27 in callInvokeWithMethodAndArg
  node_modules/regenerator-runtime/runtime.js:192:38 in enqueue
  node_modules/regenerator-runtime/runtime.js:216:8 in <unknown>
  node_modules/expo-file-system/build/FileSystem.js:46:7 in writeAsStringAsync
  node_modules/redux-persist-expo-filesystem/index.js:13:34 in writeFile
  node_modules/redux-persist-expo-filesystem/index.js:26:30 in <unknown>
  node_modules/promise/setimmediate/core.js:37:14 in tryCallOne
  node_modules/promise/setimmediate/core.js:123:25 in <unknown>
  node_modules/react-native/Libraries/Core/Timers/JSTimers.js:152:14 in _callTimer
  node_modules/react-native/Libraries/Core/Timers/JSTimers.js:200:17 in _callImmediatesPass
  node_modules/react-native/Libraries/Core/Timers/JSTimers.js:473:30 in callImmediates
  node_modules/react-native/Libraries/BatchedBridge/MessageQueue.js:337:6 in __callImmediates
  node_modules/react-native/Libraries/BatchedBridge/MessageQueue.js:135:6 in <unknown>
  node_modules/react-native/Libraries/BatchedBridge/MessageQueue.js:314:10 in __guard
  node_modules/react-native/Libraries/BatchedBridge/MessageQueue.js:134:17 in flushedQueue

After starting the App multiple times, the Error occurs more often and after seconds of use. The redux-persist storage is the main problem. I cannot explain why it worked well (and is still working well) on the Simulator and on a real device it doesn't.

I tried multiple storage packages as 'redux-persist-expo-fs-storage', 'redux-persist/lib/storage' and 'redux-persist-expo-filesystem'. None of them did the work.

The redux/index.js file:

import { combineReducers, createStore, applyMiddleware } from 'redux';
import promiseMiddleware from 'redux-promise-middleware';
import { persistStore, persistReducer } from 'redux-persist';
import guidelines from './guidelines/reducers';
import global from './global/reducers';
import ExpoFileSystemStorage from 'redux-persist-expo-filesystem';
import { composeWithDevTools } from 'redux-devtools-extension';
const persistConfig = {
    key: 'root',
    keyPrefix:'',
    storage: ExpoFileSystemStorage,
    timeout: null
}
const reducers = combineReducers({
    global,
    guidelines,
})
const persistedReducer = persistReducer(persistConfig, reducers);
export const store = createStore(persistedReducer, composeWithDevTools(applyMiddleware(promiseMiddleware())));
export const persistor = persistStore(store);

The function promiseMiddleware is used to handle the async action creators in redux as below axios is used to retrieve data in actions.js:

import axios from 'axios';
...
export const FETCH_AVAILABLE_GUIDELINES = 'FETCH_AVAILABLE_GUIDELINES';
export const FETCH_AVAILABLE_GUIDELINES_PENDING = 'FETCH_AVAILABLE_GUIDELINES_PENDING';
export const FETCH_AVAILABLE_GUIDELINES_FULFILLED = 'FETCH_AVAILABLE_GUIDELINES_FULFILLED';
export const FETCH_AVAILABLE_GUIDELINES_REJECTED = 'FETCH_AVAILABLE_GUIDELINES_REJECTED';
export const fetchAvailableGuidelines = () => {
    return {
        type: FETCH_AVAILABLE_GUIDELINES,
        payload: axios.get(CONFIG.API.ROOT + CONFIG.API.PATHS.OVERVIEW),
    }
};
...

reducers.js

import { FETCH_AVAILABLE_GUIDELINES_FULFILLED } from './actions'
const initialState = () => {
    return {
        availableGuidelines: [],
        ...
    }
}
export default (state = initialState, action) => {
    switch(action.type) {
        case FETCH_AVAILABLE_GUIDELINES_FULFILLED:
             return {
                 ...state,
                 availableGuidelines: [...action.payload.data],
             }
        ...
    }
}

Does anyone have the same Problem or a hint on how to debug my redux-persist storage. The data stored is a large JSON Object. I am sure that all keys have valid values.

Thanks for any advice and help.

Edit: My Guidelines are about 6MB each. If I fetch only one, it does not seem to crash. As soon as multiple guidelines are downloaded, it crashes. I believe it has to do with the storage system.

expo: 35.0
redux: ^4.0.1
redux-persist: ^5.10.0


问:
Javascript & HTML - Passing dropdown index value as object property returns undefined
I'm brand new to this language and I've hit a road block. I've searched for a few hours about this specific problem but can't seem to figure out why my situation is so hard to fix. I'm sure I just need a set of eyes that knows what they're looking at.

I'm trying to pass the index of a dropdown select into my Code.gs function so that I can use it elsewhere to select a certain row of a data in a spreadsheet. I set up the object driverPicked and give it the property selected, and then hunt for the selected index property. As I'm really new to this, I'm having a hard time understanding the consequences of nesting properties like this and could use a clue as to how to solve the "TypeError: Cannot read property 'selected' of undefined (line 39, file "Code")" error I've been getting for hours now.

There are so many similar answers but I can't sort out exactly how they apply to me - so forgive me for that!

```<code>var url = "REDACTED";

function doGet(e){

//var x = document.getElementById("driver").selectedIndex;

var driverIndex = userClicked();
var ss = SpreadsheetApp.openByUrl(url);
var ws = ss.getSheetByName("Results_2019");
var listDrivers = ws.getRange(4,1,ws.getRange("A3").getDataRegion().getLastRow(),1).getValues();
var infoHeading = ws.getRange(3, 1, 1, 8).getValues();
var driverInfo = ws.getRange(driverIndex, 1, 1 ,8).getValues();

var tmp = HtmlService.createTemplateFromFile("page");
tmp.title = "GLTC Driver List";
//tmp.listDrivers = listDrivers.map(function(r){r[0];});
tmp.listDrivers = [].concat.apply([], listDrivers);
tmp.infoHeading = [].concat.apply([], infoHeading);
tmp.driverInfo = [].concat.apply([], driverInfo);
tmp.driverIndex = driverIndex;

return tmp.evaluate();

}

function include(filename){
  return HtmlService.createHtmlOutputFromFile(filename).getContent();
}

function userClicked(driverPicked) {
  console.log(driverPicked);
  var driverName = driverPicked.value;
  return driverName;
}

<!DOCTYPE html>
<html>
  <head>
    <base target="_top">
    <!--Let browser know website is optimized for mobile-->
     <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    <!--Import Google Icon Font-->
     <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
    <!-- Compiled and minified CSS -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
    <?!= include("page-css"); ?>
  </head>
  <body>

    <h1><?= title; ?></h1>

    <div class="input-field">
  <select id="driver">
    <option disabled selected>Choose Driver</option>
    <? for(var i=0;i<listDrivers.length;i++){ ?>
      <option class="selected">
        <?= listDrivers[i]; ?>
      </option>
      <? } ?>
  </select>
</div>

  <h5><?= infoHeading; ?></h5>

  <h5><?= driverInfo; ?></h5>

  <h5><?= driverIndex; ?></h5>

<script>

document.getElementById("driver").addEventListener("change", doStuff); // add onchange listener to the select element instead of options

function doStuff(event) {
  var driverPicked = {};

  driverPicked.driver = event.target.value;
  driverPicked.selected = event.target.options.selectedIndex;
  userClicked(driverPicked);
}

  </script>

    <!-- Compiled and minified JavaScript -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
    <?!= include("page-js"); ?>

  </body>
</html>
</code>```

答:
There a a few simplifications done here.  Main one would be that instead of invoking the function via google.script.run I am just directly calling it.

UPDATE

I forgot to include in the initial response.  Element ids are supposed to be unique.  If you loop through all your elements and do not change their id value then you are crafting incorrect HTML and the function getElementById(...) will return an array of elements instead of just on (thus, the rest of the code will not work as expected)

See demo below

document.getElementById("driver").addEventListener("change", doStuff);

function doStuff() {
  var driverPicked = {};
  selectBox = document.getElementById("driver");

  driverPicked = selectBox.options[selectBox.selectedIndex];
  console.log('User changed value to: ');
  console.log(driverPicked);

  // will this work on other browsers?
  // google.script.run.userClicked(driverPicked);
  // I am using this instead for demo purposes
  userClicked(driverPicked);
}

function userClicked(driverPicked) {
  var driverName = driverPicked.value;
  var driverText = driverPicked.text;
  console.log('name/value: ' + driverName + ' text: ' + driverText);

  return driverName;
}```
<pre class="snippet-code-html lang-html prettyprint-override"><code><div class="input-field">
  <select id="driver">
    <option disabled>Choose Driver</option>
    <option value="1">One</option>
    <option value="2">Two</option>
    <option value="3">Three</option>
    <option value="4">Four</option>
  </select>
</div></code>```

Body:
I'm brand new to this language and I've hit a road block. I've searched for a few hours about this specific problem but can't seem to figure out why my situation is so hard to fix. I'm sure I just need a set of eyes that knows what they're looking at.

I'm trying to pass the index of a dropdown select into my Code.gs function so that I can use it elsewhere to select a certain row of a data in a spreadsheet. I set up the object driverPicked and give it the property selected, and then hunt for the selected index property. As I'm really new to this, I'm having a hard time understanding the consequences of nesting properties like this and could use a clue as to how to solve the "TypeError: Cannot read property 'selected' of undefined (line 39, file "Code")" error I've been getting for hours now.

There are so many similar answers but I can't sort out exactly how they apply to me - so forgive me for that!

var url = "REDACTED";

function doGet(e){

//var x = document.getElementById("driver").selectedIndex;

var driverIndex = userClicked();
var ss = SpreadsheetApp.openByUrl(url);
var ws = ss.getSheetByName("Results_2019");
var listDrivers = ws.getRange(4,1,ws.getRange("A3").getDataRegion().getLastRow(),1).getValues();
var infoHeading = ws.getRange(3, 1, 1, 8).getValues();
var driverInfo = ws.getRange(driverIndex, 1, 1 ,8).getValues();

var tmp = HtmlService.createTemplateFromFile("page");
tmp.title = "GLTC Driver List";
//tmp.listDrivers = listDrivers.map(function(r){r[0];});
tmp.listDrivers = [].concat.apply([], listDrivers);
tmp.infoHeading = [].concat.apply([], infoHeading);
tmp.driverInfo = [].concat.apply([], driverInfo);
tmp.driverIndex = driverIndex;

return tmp.evaluate();

}

function include(filename){
  return HtmlService.createHtmlOutputFromFile(filename).getContent();
}

function userClicked(driverPicked) {
  console.log(driverPicked);
  var driverName = driverPicked.value;
  return driverName;
}

<!DOCTYPE html>

    <base target="_top">

     <meta name="viewport" content="width=device-width, initial-scale=1.0"/>

     <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">

    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
    <?!= include("page-css"); ?>

<?= title; ?>

  <select id="driver">
    <option disabled selected>Choose Driver</option>
    <? for(var i=0;i<listDrivers.length;i++){ ?>
      <option class="selected">
        <?= listDrivers[i]; ?>
      </option>
      <? } ?>
  </select>

<?= infoHeading; ?>

<?= driverInfo; ?>

<?= driverIndex; ?>

    <?!= include("page-js"); ?>

Body:
There a a few simplifications done here.  Main one would be that instead of invoking the function via google.script.run I am just directly calling it.

UPDATE

I forgot to include in the initial response.  Element ids are supposed to be unique.  If you loop through all your elements and do not change their id value then you are crafting incorrect HTML and the function getElementById(...) will return an array of elements instead of just on (thus, the rest of the code will not work as expected)

See demo below

document.getElementById("driver").addEventListener("change", doStuff);

function doStuff() {
  var driverPicked = {};
  selectBox = document.getElementById("driver");

  driverPicked = selectBox.options[selectBox.selectedIndex];
  console.log('User changed value to: ');
  console.log(driverPicked);

  // will this work on other browsers?
  // google.script.run.userClicked(driverPicked);
  // I am using this instead for demo purposes
  userClicked(driverPicked);
}

function userClicked(driverPicked) {
  var driverName = driverPicked.value;
  var driverText = driverPicked.text;
  console.log('name/value: ' + driverName + ' text: ' + driverText);

  return driverName;
}

<div class="input-field">
  <select id="driver">
    <option disabled>Choose Driver</option>
    <option value="1">One</option>
    <option value="2">Two</option>
    <option value="3">Three</option>
    <option value="4">Four</option>
  </select>
</div>