React Hooks - 无法获取更新的状态值答案

【问题标题】：React Hooks - Unable to get updated state valueReact Hooks - 无法获取更新的状态值
【发布时间】：2019-07-26 15:36:27
【问题描述】：

我的 uploadStatus 状态有问题。我没有得到 react-hooks 状态的更新值。如果我在 fileOnProgress() 中添加了 console.log()，我将得到 uploadStatus 状态的 [] 值。

我尝试将 uploadStatus 状态置于 useEffect 中，但由于状态也在函数内部更新，因此发生了无限循环。

注意：在这种情况下，uploadStatus 已经从其他函数填充，这就是我期望获得更新值的原因。

import React, { useEffect, useState } from 'react';

function Dropzone {

  const [ uploadStatus, setUploadStatus ] = useState([]);
  const [ resumableFiles, setResumableFiles ] = useState([]);

  const resumableListener = () => {
      if (resumableFiles.length === 0) return;
      resumableFiles.map(resumable => {
          resumable.on('progress', () => {
              fileOnProgress(resumable);
          });
          resumable.on('fileError', (error) => {
              console.log(error)
          });
      });
  };

  const fileOnProgress = (resumable) => {
      const file = resumable.files[0];
      const size = (file.size / 1048576).toFixed(2);
      const progress = (resumable.progress() * 100).toFixed(2).toString() + '%';
      const cont = [...uploadStatus];

      cont.map(d => {
          if (d.id === file.uniqueIdentifier) {
              d.status = progress;
          }
      });
      setUploadStatus(cont);  
  };

  useEffect(() => {
      resumableListener();
  }, [resumableFiles]);

  ...

}

【问题讨论】：

您实际上在哪里更新 uploadStatus - 是否仅在 fileOnProgress 内部？因为您只是将当前值传播到一个新数组中......这只是旧值。 Array.map 返回一个新数组，所以除非你分配并使用它，否则什么都不会发生。
你的.map不应该返回一些东西吗？ const x = cont.map(d => { if(d.id === file.uniqueId){d.status = progress} return d; })
@ajmajmajma 请阅读说明。我只是简化并放置了有问题的代码块。我有另一个函数可以在 uploadStatus 状态中增加价值。在这种情况下，uploadStatus 已经填充了一个值。
好吧，您在fileOnProgress 中的地图有问题 - 但是如果在那个时间点它已经假设有另一个值（除了启动的空数组），您可能还有其他问题和可能需要显示该代码。

标签： javascript reactjs react-hooks

【解决方案1】：

Array.map 返回一个新数组，所以试试：

  const newCont = cont.map(d => {
      if (d.id === file.uniqueIdentifier) {
          d.status = progress;
      }

      return d;
  });
  setUploadStatus(newCont);

正如@go_diego 所指出的，您也错过了地图中的回报。

MDN docs for reference

【讨论】：

你还没有返回任何东西。需要return d
我也一直忘记退货。