Question

在 React Hookstate 中更新数组元素

2021-07-21

852

reactjs

我有一个使用 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：超出最大调用堆栈大小。

Answer 1

我很确定您只需添加 .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];
  });
};

Answer 2

实际上，我想重新排序列表中的某个项目。

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

const Test: React.FC = () => {
  const books: State<Array<any>> = useState([
    'Harry Potter',
    'Sherlock Holmes',
    'Swiss Family Robinson',
    'Tarzon',
  ]);
  const ReorderItems = () => {
    books.set((p) => {
      const reOrderedItem = p[2];
      p.splice(2, 1);
      p.splice(0, 0, reOrderedItem);
      return p;
    });
  };

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

export default Test;