时间戳

首页 > 解决方案 > 更新 React Hookstate 中的数组元素

reactjs - 更新 React Hookstate 中的数组元素

问题描述

我有一个使用 React Hookstate 的应用程序。对于一种状态，我使用的是数组。我想更新这个数组中的单个元素。但是更新后的元素总是包裹在代理标签中。

import React from 'react';
import { useState, none, State } from '@hookstate/core';

const Test: React.FC = () => {
 const books: State<Array<any>> = useState([
   'Harry Potter',
   'Sherlock Holmes',
   'Swiss Family Robinson',
   'Tarzon',
 ]);
 const SwapItems = () => {
   // books.merge((p) => ({ 1: p[0], 0: p[1] })); // this way it works.

   const reOrderedItem = books.nested(0);
   books.nested(0).set(none);
   books.set((p) => {
     p.splice(0, 0, reOrderedItem);
     return p;
   });
 };

 return (
   <div>
     <ol>
       {books.map((book) => {
         return <li>{book.get()}</li>;
       })}
     </ol>
     <br />
     <button onClick={SwapItems}>Swap Books</button>
   </div>
 );
};

export default Test;

//error react-dom.development.js:11393 Uncaught RangeError: 超出最大调用堆栈大小。

标签： reactjs

解决方案

我很确定你只需要添加.value如下：

const reOrderedItem = books.nested(0).value;

我不确定您为什么不喜欢update可以工作的版本——这似乎要简单得多。

或者，如果您想使用set，为什么不直接使用这些项目？

   const reOrderedItem = books.nested(0).value;
   books.nested(0).set(books.nested(1).value);
   books.nested(1).set(reOrderedItem);

或者，您可以set像这样在内部进行操作（但您是对的，这对于大型数组来说效率低下）：

const SwapItems = () => {
  books.set((p) => {
    const [a, b, ...rest] = p;
    return [b, a, ...rest];
  });
};

推荐阅读