对 lodash 和 setInterval 的反应问题

Question

I have an issue with using Lodash + setInterval.

What I want to do: Retrieve randomly one element of my object every 3 seconds

this is my object:

    const [table, setTable]= useState ([]);

so I start with that:

const result = _.sample(table);
   console.log(result);

console give => Object { label: "Figue", labelEn: "fig" }

But if a add:

const result = _.sample(table);
   console.log(result.label);

console give => TypeError: result is undefined

Beside that I tried to add setInterval and also try with useEffect but or code crash or console give me two numbers every 3 second => 2,6,2,6......

Answer 1

Ciao, supposing that table object is correclty filled, you could use lodash and setInterval to get random object of table using useEffect and useRef hooks like:

const interval = useRef(null);
  useEffect(() => {
    if (!interval.current) {
      interval.current = setInterval(() => {
        const result = _.sample(table);
        console.log(result.label);
      }, 3000);
    }
  }, [table]);

Then to clean setInterval when component will be unmount you could use another useEffect in this way:

useEffect(() => {
    return () => {
      clearInterval(interval.current);
      interval.current = null;
    };
  }, []);

EDIT

After your explanation, I found the cause of your problem. Before start setInterval you have to wait that table was filled with values (otherwise you get an error).

To solve that it's just necessary to put another condition on first useEffect ( table.length > 0 ), and load data on second useEffect .

So the first useEffect becomes:

  const interval = useRef(null);
  useEffect(() => {
    if (!interval.current && table.length > 0) {
      interval.current = setInterval(() => {
        const result = _.sample(table);
        console.log(result.label);
      }, 3000);
    }
  }, [table]);

And the second one:

  useEffect(() => {
    jsonbin.get("/b/5f3d58e44d93991036184474/5")
     .then(({data}) => setTable(data));

    return () => {
      clearInterval(interval.current);
      interval.current = null;
    };
  }, []);

Here the codesandbox updated.

Answer 2

The problem is that you access table before it is loaded.

You should either provide an initial value to that allows a successful do all your operations:

// use an array that has at least one element and a label as initial table value
const [table, setTable] = useState([{label: "default label"}]);

useEffect(() => {
  jsonbin.get("/b/5f3d58e44d93991036184474/5")
         .then(({data}) => setTable(data));
});

const result = _.sample(table);
console.log(result.label);

// ...

Or use an if or something alike to handle multiple scenarios:

// use an empty array as initial table value
const [table, setTable] = useState([]);

useEffect(() => {
  jsonbin.get("/b/5f3d58e44d93991036184474/5")
         .then(({data}) => setTable(data));
});

const result = _.sample(table);
// account for the initial empty table value by checking the result
// of _.sample which is `undefined` for empty arrays
if (result) {
  console.log(result.label);
} else {
  console.log("do something else");
}

// ...

If you fetch your data asynchronously you must think about what you want to use while the data is being fetched. The minimal thing to do is tell React to not render the component while the data is missing (being fetch).

const [table, setTable] = useState([]);

useEffect(() => {
  jsonbin.get("/b/5f3d58e44d93991036184474/5")
         .then(({data}) => setTable(data));
});

const result = _.sample(table);
if (!result) return null; // <- don't render if there is no result

console.log(result.label);

// ...