如何使用usestate在特定索引中拼接或推送新元素？

Question

我试图在数组中插入新元素并更新基于数组的状态，但是更新状态后的问题是它没有在组件中呈现。

注意：我不太确定如何使用 splice。（我希望 handleClick 函数在单击的元素下添加新元素，但似乎我也失败了。）
注意 2：我也试过 setstate((pre) => { pre.splice(index + 1, 0, { id: 3, text: "xxx", autoFocus: true }); return pre; }); 但效果不佳。

import React, { useState } from "react";
import "./styles.css";

export default function App() {
  let elements = [
    { id: 0, text: "first", autoFocus: true },
    { id: 1, text: "second", autoFocus: true },
    { id: 2, text: "third", autoFocus: true }
  ];
  const [state, setstate] = useState(elements);

  function handChange(e) {
    if (e.keyCode == 13) {
      const x = state;
      const index = x.findIndex((item) => item.id == e.target.id);

      //i'm using autoFocus to move the focus  (I-beam pointer) to the nex field.
      //but i still get errors with it
      // e.map((item) => Object.assign(item, { autoFocus: false }));
      
      x.splice(index + 1, 0, { id: 3, text: "xxx", autoFocus: true });
      console.log(state); // you can see this update probarly
      setstate(x); // but when I update state sometimes it don't render othertimes it take a while before render.

    }
  }

  return (
    <div className="App">
      {state.map((e) => (
        // when I say it don't render I mean the e value don't get updated.
        <div
          focus={e.focus}
          contentEditable="true"
          id={e.id}
          onKeyUp={handChange}
        >
          {e.text}
        </div>
      ))}
    </div>
  );
}

于 codesandbox

Answer 1

您可以像这样使用 splice 来更新您的阵列。

const newArray = [...state];
newArray.splice(e.target.id, 0, newElement);
setstate(newArray);

因为 splice 改变了原始数组。您可以使用扩展运算符创建一个新数组，然后对其应用拼接。

这将创建一个包含状态的新数组。

[...state]

你可以查看 splice 的文档 here

Answer 2

而不是使用

x.splice(index + 1, 0, { id: 3, text: "xxx", autoFocus: true });
      setstate(x)

我用这个代码替换它

setstate((pre) => {
      
        return [
          ...pre.slice(0, index + 1),
          { id: 3, text: "xxx", autoFocus: true },
          ...pre.slice(index + 1, state.length)
        ];
      })

那个return索引上元素之前的元素index + 1+新元素+索引上元素之后的元素index + 1

例如，如果您有 3 个元素并且您在 2d 元素上按下回车键，那么它的索引是 1 您将在索引 1+1 中创建一个新元素并且在它之后，您将 return 第三个元素，它位于 1+1, 3 之间的区域，其中 3 是数组的长度。

替代解释：

...pre.slice(0, index + 1),这个return你输入的元素之前的所有元素+你输入的元素。
{ id: 3, text: "xxx", autoFocus: true }, 这将在之前的元素之后创建新元素
...pre.slice(index + 1, state.length) 这将 return 您点击的元素之后的元素进入（如果没有，它将 return 没有）

如何使用usestate在特定索引中拼接或推送新元素？

how to splice or push new elements in a specific index with usestate?

arrays

splice

reactjs

use-state

替代解释：