reactjs 同时使用旧值和新值更新状态

rhfm7lfc  于 2022-12-12  发布在  React
关注(0)|答案(1)|浏览(165)

我一直在尝试更新DOM上的initUsers值,以便初始状态值正常工作,但当我更新initUsers时,它呈现的值与预期值不同。
基本上,entriesNum会得到一个数字作为事件,并根据它更改initUsers状态值的顺序,如下所示:
enter image j here
更改为:
enter image description here
第一个
因为我有两种形式的initUsers,所以我必须设置两种解构方式,如下所示:

{isNewObj ?
  initUsers.map((objUser ) => (
    < >
      {Object.keys(objUser).map((numo) => (
        <div
          key={numo}
          className="contacts-info  border-solid border-2 border-black table-row w-full "
        >
          <input type={"checkbox"} className={`${shortcut}`} />
          <div className={`${shortcut}`}>
            {objUser[numo].index}
          </div>
          <div className={`${shortcut}`}>
            {objUser[numo].email}
          </div>
          <div className={`${shortcut}`}>
            {objUser[numo].access}
          </div>
        </div>
      ))}
    </ >
  )) :
  initUsers.map(({ index, handle, phone, email, access }) => (
    <div
      key={id}
      className="contacts-info  border-solid border-2 border-black table-row w-full "
    >
      <input type={"checkbox"} className={`${shortcut}`} />
      <div className={`${shortcut}`}>{index}</div>
      <div className={`${shortcut}`}>{handle}</div>
      <div className={`${shortcut}`}>{phone}</div>
      <div className={`${shortcut}`}>{email}</div>
      <div className={`${shortcut}`}>{access}</div>
    </div>
  ))
}

第二个条件在initUsers未嵌套时析构它,并显示以下结果:
enter image description here
第一个将其解构为嵌套形式,并显示以下结果:
enter image description here
因此,解构嵌套initUsers的结果不是5行,而是9行。

0mkxixxg

0mkxixxg1#

你不能用这种方式更新状态Newobj.push不能处理ReactJs状态。你可以用setNewobj(你的新数据)
setNewobj((prev)=〉[... prev,{}])这里的prev是旧的数据。

相关问题