Почему имя пользователя, обновленное в setInterval, не отображается - PullRequest
Новая
       9

Почему имя пользователя, обновленное в setInterval, не отображается

0 голосов
/ 26 марта 2020

Почему обновляется только счетчик, а не имя пользователя 

import React, { useState } from "react";
import ReactDOM from "react-dom";

function ReposGrid({ id }) {
  const [count, setCount] = useState(0);
  var username = "Deen";
  let timeId = setInterval(() => {
    setCount(count + 1);
    username = username + count;
    console.log("shows updated username ", username);
  }, 1000);

  React.useEffect(() => {
    document.title = `Hello, ${username} ${count}`; //this updates title everytime but username is still old
  }, [count]);

  console.log("shows old instead of updated username ", username); //doesn't work.doesn't show updated username value

  return <h1>{username}</h1>;
}

const rootElement = document.getElementById("root");
ReactDOM.render(<ReposGrid />, rootElement);

Ответы [ 3 ]

1 голос
/ 26 марта 2020

Код соответствует правильному поведению, позвольте мне объяснить:

  1. setInterval выполняется и ставится в очередь в очереди событий.
  2. Обратите внимание, что на данный момент код внутри него не ' t выполнено, но отложено на выполнение в 1 сек c.
  3. Далее вы вводите функцию useEffect. Обратите внимание, что код внутри setInterval по-прежнему не выполняется.
  4. Здесь вы обновляете заголовок предыдущим / исходным значением username.
  5. Затем вы сохраняете предыдущее значение console.log для имени пользователя и возвращаете он внутри тега header.

На этом этапе код, находящийся в очереди событий, помещается обратно в стек и выполняется (т. е. по крайней мере после 1 се c ).

setCount(count + 1) называется. Поскольку переменная состояния была обновлена, то выполняется useEffect и остальная часть функции (включая обновление заголовка) Теперь будет выполнен следующий оператор username = username + count. Поскольку это не переменная состояния, поэтому, хотя переменная обновляется, useEffect не вызывается и document.title не обновляется. Теперь имя пользователя обновляется (но без побочных эффектов). Далее вы console.log("shows updated username ", username) Это должно обновить значение console.log.
0 голосов
/ 26 марта 2020

Littlebit нужна очистка. Всегда используйте побочные эффекты с useEffect. Все, что вы хотите немедленного эффекта, используйте useLayoutEffect. И следуйте React способ написания. 

import React, { useState } from "react";
import ReactDOM from "react-dom";

function ReposGrid({ id }) {
  const [count, setCount] = useState(0);
  let username = "Dean " ;
  React.useEffect(() => {
    let timeId = setInterval(() => {
      setCount(count + 1);
    }, 1000);
    return () => {
      clearInterval(timeId);
    };
  }, [count]);
  React.useLayoutEffect(() => {
    document.title = `Hello, ${username} ${count}`;
  }, [username, count]);
  console.log("shows old instead of updated username ", username, count); //doesn't work.doesn't show updated username value
  return (
    <h1>
      {username}
      {count}
    </h1>
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(<ReposGrid />, rootElement);


"use strict";

function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }

function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }

function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(n); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }

function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }

function _iterableToArrayLimit(arr, i) { if (typeof Symbol === "undefined" || !(Symbol.iterator in Object(arr))) return; var _arr = []; var _n = true; var _d = false; var _e = undefined; try { for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }

function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }

function ReposGrid(_ref) {
  var _ref$username = _ref.username,
      username = _ref$username === void 0 ? "User" : _ref$username;

  var _useState =  React.useState(0),
      _useState2 = _slicedToArray(_useState, 2),
      count = _useState2[0],
      setCount = _useState2[1];

  React.useEffect(function () {
    var timeId = setInterval(function () {
      setCount(count + 1);
    }, 1000);
    return function () {
      clearInterval(timeId);
    };
  }, [count]);
  React.useLayoutEffect(function () {
    document.title = "Hello, ".concat(username, " ").concat(count);
  }, [username, count]);
  console.log("shows old instead of updated username ", username, count); //doesn't work.doesn't show updated username value

  return /*#__PURE__*/React.createElement("h1", null, username, count);
}

var rootElement = document.getElementById("root");
ReactDOM.render( /*#__PURE__*/React.createElement(ReposGrid, null), rootElement);
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.10.0/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.10.0/umd/react-dom.production.min.js"></script>
<div id="root"></div>
0 голосов
/ 26 марта 2020

Сбой, потому что React не знает о переменной имени, потому что, как упоминалось выше, она не является частью состояния. Поэтому вы не видите никаких обновлений при использовании setState.

...