如何使用 useState 钩子和异步调用来更改数组？

Question

我正在尝试从 put 请求更新数组

const [descriptors, setDescriptors] = useState([]);

const handleDescriptorUpdate = (id, descriptorData) => {
    services
      .putDescriptor(id, descriptorData)
      .then((response) => {
        const descriptorIndex = _.findIndex(descriptors, (e) => e.id === id);
        if (descriptorIndex !== -1) {
          const tempDescriptors = [...descriptors];
          tempDescriptors[descriptorIndex] = response.data;
          setDescriptors(tempDescriptors);
        }
      })
      .catch((error) => {
        console.error(error);
      });
  };

当我当时只执行 1 个请求时，这很好用，但是当我单击执行两次更新的按钮时，而不是传播数组并用新值更新旧值，它们都在传播相同的数组导致当第二个承诺被解决时，它会使用从服务器返回的新值（第二个值）更新状态但是改变第一个值（被第一个承诺改变的那个）为其原始值。

描述符最初由对象数组填充（来自 get 请求）：

[
  {
    "id": 24,
    "name": "Test 4.1",
    "percentage": 0,
    "towerId": "5cfc9200-c04a-11e9-89c0-2dd5d3707b1b"
  },
  {
    "id": 23,
    "name": "Test 3.1",
    "percentage": 0,
    "towerId": "5cfc9200-c04a-11e9-89c0-2dd5d3707b1b"
  }
]

Answer 1

我看到你让描述符作为状态而不是引用，正如我在上面的评论中所说，useState 不会立即反映更改，所以在内存中保留数组的一个引用，你可以使用钩子 useRef 来做到这一点，请参阅下一个例子：

const [descriptors, setDescriptors] = useState([]);

const descriptorsReference = useRef(null);

const handleDescriptorUpdate = (id, descriptorData) => {
    services
      .putDescriptor(id, descriptorData)
      .then((response) => {
        const descriptorIndex = _.findIndex(descriptors, (e) => e.id === id);
        if (descriptorIndex !== -1) {
         // Use descriptorsReference instead
          const tempDescriptors = [...descriptorsReference.current];
          tempDescriptors[descriptorIndex] = response.data;
          // Next line is to update the descriptors into descriptors state, this phase doesn't happen immediately 'cause is asynchronous 
          setDescriptors(tempDescriptors);
          // Next line is to update the descriptors in memory, this phase occurs immediately 
          descriptorsReference.current = tempDescriptors
        }
      })
      .catch((error) => {
        console.error(error);
      });
  };

Answer 2

尽管React batches all setStates done during an event handler.

setDescriptors 在事件处理程序的范围之外，因为它仅在 promise 解决时调用。

因此，您需要使用state callback 来正确管理描述符版本。

.then((response) => {
  setDescriptors((descriptors) => ( // use state callback
    descriptors.map((desc) =>
      desc.id === id ? { ...desc, ...response.data } : desc
    ) 
  })
}