React useState 实现，以在重新渲染时保持随机值不变

huangapple
go评论94阅读模式
英文:

React useState implementation to keep random value unchanged on re-render

问题

我有一个存储在数组中的名字列表。
每当用户点击添加按钮时，新的名字就会被推送到数组中。
这些名字被渲染在页面上。每个名字在特定div内有随机生成的位置。

每当新的名字被推送到数组中时，数组中所有其他名字的位置都会发生变化。

我相当确定我需要实现 useEffect 钩子，但我无法使其正常工作。

以下是代码：

  1. const randomNum = (min: number, max: number): number => {
  2.   return Math.floor(Math.random() * (max - min + 1) + min);
  3. };
  5. const elements = data.map((el) => {
  6.   return (
  7.     <div
  8.       style={{
  9.         position: 'absolute',
  10.         top: `${randomNum(0, 51)}%`,
  11.         right: `${randomNum(0, 51)}%`,
  12.       }}
  13.     >
  14.       {el.name}
  15.     </div>
  16.   );
  17. });
  19. // 更新名字数组状态的函数
  20. function add(id: number) {
  21.   setData(
  22.     update(data, {
  23.       data: {
  24.         $push: [
  25.           {
  26.             name: '',
  27.             id,
  28.           },
  29.         ] as any,
  30.       },
  31.     })
  32.   );
  33. }
  35. // 触发“add”函数的按钮
  36. <div
  37.   onClick={() => add(data.data.length + 1)}
  38. >
  39.   点击添加
  40. </div>
  41. <div>
  42.   {elements}
  43. </div>

感谢你的帮助。

英文:

I have a list od names stored in array.
Everytime user clicks on the add button, a new name is pushed to the array.
Those names are rendered on the page. Every name has randomly generated position inside a specific div.

Everytime a new name is pushed to the array, a position of all the other names inside an array changes.

I am pretty sure that I need to implement useEffect hook, but I can't get it to work right.

Here is the code

  1.   const randomNum = (min: number, max: number): number =&gt; {
  2.     return Math.floor(Math.random() * (max - min + 1) + min);
  3.   };
  5.   const elements = data.map((el) =&gt; {
  6.     return (
  7.         &lt;div
  8.           style={{
  9.             position: &#39;absolute&#39;,
  10.             top: `${randomNum(0, 51)}%`,
  11.             right: `${randomNum(0, 51)}%`,
  12.           }}
  13.         &gt;
  14.           {el.name}
  15.         &lt;/div&gt;
  16.     );
  17.   });

A function which updates the state of the names array

  1.  function add(id: number) {
  2.     setData(
  3.       update(data, {
  4.         data: {
  5.           $push: [
  6.             {
  7.               name: &#39;&#39;,
  8.               id,
  9.             },
  10.           ] as any,
  11.         },
  12.       })
  13.     );
  14.   }

And a button which triggers the "add" function

  1.        &lt;div
  2.           onClick={() =&gt; add(data.data.length + 1)}
  3.         &gt;
  4.           Click to add
  5.         &lt;/div&gt;
  6.         &lt;div&gt;
  7.            {elements}
  8.         &lt;/div&gt;

Thank you for the help

答案1

得分: 2

function add(id: number) {
setData(
update(data, {
data: {
$push: [
{
name: '',
id,
top: ${randomNum(0, 51)}%,
right: ${randomNum(0, 51)}%,
},
] as any,
},
})
);
}

Also don't forget adding a 'key' (use the 'id') when rendering a list:

const elements = data.map((el) => (


{el.name}

));

英文:

Add to position (top and right) when you add the name, and not when you render it:

  1. function add(id: number) {
  2.     setData(
  3.       update(data, {
  4.         data: {
  5.           $push: [
  6.             {
  7.               name: &#39;&#39;,
  8.               id,
  9.               top: `${randomNum(0, 51)}%`,
  10.               right: `${randomNum(0, 51)}%`,
  11.             },
  12.           ] as any,
  13.         },
  14.       })
  15.     );
  16.   }

Also don't forget adding a key (use the id) when rendering a list:

  1. const elements = data.map((el) =&gt; (
  2.   &lt;div
  3.     key={el.id}
  4.     style={{
  5.       position: &#39;absolute&#39;,
  6.       top: e.top,
  7.       right: e.right,
  8.     }}
  9.   &gt;
  10.     {el.name}
  11.   &lt;/div&gt;
  12. ));

huangapple
  • 本文由 发表于 2023年3月9日 21:44:06
  • 转载请务必保留本文链接：https://go.coder-hub.com/75685428.html
  • react-hooks
  • reactjs
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定