在 REACTJS 中，相同的函数具有不同的状态，具体取决于调用位置（在 dom 中）

Question

让我开始说我知道 setState 是异步的，这不是我遇到的问题（我猜）！

我有一个表，我将每一行存储在一个数组中，定义为：

const [rows, setRows] = useState([]);

我将表格渲染为：

rows.map(r => {
   if(r.prop == 1) {
      return (
         <div key={r.position} onClick={e => AddRow(r.position)}>{r.label} </div>
      )
   }
})

AddRow 函数只是在指定索引 (r.position) 处添加一行，并相应地移动和更新所有行。当然，我使用 setRows([...newRows]); 更新行；

只要我在底部添加一行，它就可以完美运行。但是，例如，如果我在位置 2 添加一行并且行数为 10，则行（数组）仅包含 2 行，就像添加第二行时一样。第 3 行、第 4 行也一样.....就像 AddRow 函数已为每一行复制，并在复制时使用“行”的状态。

我尝试删除 if 语句，但问题仍然存在。我也尝试使用假 id 作为密钥，但问题仍然存在。

我感觉我错过了一些非常简单的东西，有什么想法吗？

非常感谢

供参考，这是 AddRow 函数

const AddTile = (atPosition) => {
        let newPosition = atPosition + 1;

        let newRow = {
            position: newPosition,
            label: 'something',
            prop: 1
        }        

        let tmp = [];
        let counter = 0;
        let added =  false;
        for(let t of rows) {
            if(newPosition == counter) {
                tmp.push(newRow);
                counter++;
                added = true;
            } 
            
            t.position = counter;
            tmp.push(t);
            counter++;
        }

        if(!added) {
            tmp.push(newTile);
        }

        setRows([...tmp]);
  }

Answer 1

问题

问题似乎是您使用元素 position 属性作为反应键，因此键不稳定，这意味着数据没有“粘”到它们的 React 键，因此 React 知道它是上一次渲染中的相同对象。

解决方案

我建议将“索引”/“计数器”/“位置”与组件分离，作为识别它并用作 React 键的一种方式。使用与元素保持一致的 GUID，并使用映射的 index 作为插入位置。您还应该使用setRows 中的功能状态更新来更新之前的状态，而不是 some 状态，该状态在回调范围内从创建回调的渲染周期中关闭。 （几乎任何时候状态更新取决于您想要使用功能更新的任何先前状态。）

import { v4 as uuidV4 } from 'uuid';

...

const addRow = (index) => {
  const newRow = {
    id: uuidV4(),       // <-- new id
    label: 'something',
    prop: 1
  }

  setRows(rows => {
    const newRows = rows.slice();     // <-- copy previous state
    newRows.splice(index, 0, newRow); // <-- insert after index
    return newRows;                   // <-- return new state
  });
}

...

rows.map((r, index) => (
  <div
    key={r.id}                    // <-- use guid as key
    onClick={() => addRow(index)} // <-- use index for insertion
  >
    {r.label}
  </div>
))

此外，您似乎一直在尝试根据prop 值进行一些过滤。如果是这样，那么先做过滤器，然后映射。

rows
  .filter(r => r.prop === 1)
  .map((r, index) => (
    <div key={r.id} onClick={() => addRow(index)} >
      {r.label}
    </div>
  ))