按創建對象的對象數組對對象鍵/值進行排序

Question

所以我為我的應用程序的用戶生成一個表單，以從一組對象中填寫，每個對象都有自己的驗證數據......等等。 這個問題是當用戶填寫表單並從中創建一個新對象以發送到后端時，如果用戶按順序填寫表單，則對象的順序正確，但如果用戶返回並改變一個值，對象就亂了。
原始對象：

const formData = [
{
  name: 'One',
  validation: 'Number',
},
{
  name: 'Two',
  validation: 'Number',
},
{
  name: 'Three',
  validation: 'Number',
},
{
  name: 'Four',
  validation: 'Number',
}

使用句柄更改方法構建新對象
對象句柄：

  const [newForm, setNewForm] = useState({})

  const handleChange = (e) => {
    const { name, value } = e.target
    setNewForm({ ...newForm, [name]: parseFloat(Number(value).toFixed(2)) })
  }

正確對象：

newForm = {
  One: 1,
  Two: 2,
  Three: 3,
  Four: 4,
}

不正確的對象：

newForm = {
  Two: 2,
  One: 1,
  Four: 4,
  Three: 3,
}

我很難找到一種將新表單與 formData 進行比較的方法，以確保它們保持正確的順序。 如果有人能給我一些建議並幫助我，我將不勝感激。

Answer 1

您的狀態將出現問題，由於useState的異步行為，您可能無法獲得先前的狀態或newForm 。 您將要使用帶有參數的箭頭函數來獲取先前狀態的參數。 像這樣：

setNewForm((prevState) => ({
  ...prevState, [name]: parseFloat(Number(value).toFixed(2))
}))

這里還有一些來自我的github repo的代碼，用於比較對象

/*
  Step 1: Check if both objects have same number of keys
*/

function keyNum(k1, k2) {
  return k1.length === k2.length ? true : false;
}

/*
  Step 2: put objects in the correct order
*/

function changeOrder(o1, o2) {
  /* This will check that all keys are equal and exist also
   * The first object's keys will look like this in array form: [a, b, c, d]
   * The next object's keys will probably be out of order relative to the first object's keys: [b, d, a, c]
   * The iterator will start on the first key of the first array and find it in the second, and create a new object in order
   * 
   * Example of first iteration:
   * 
   * (values of each key will obviously come with the key)
   * 
   *     ▼
   *    [a, b, c, d]
   *      
   *           ▼
   *    [b, d, a, c]
   * 
   *    new:
   *    [a]
   * 
   */

  let newObj = {};
  let equal = false;
  
  let baseObjKeys = Object.keys(o1);

  let returnObj = {
    newObj: "",
    equal: equal
  }

  for(let i = 0; i < baseObjKeys.length; i++) {
    if(typeof o2[baseObjKeys[i]] === 'undefined') {
      return returnObj;
    }

    newObj[baseObjKeys[i]] = o2[baseObjKeys[i]];
  }

  equal = true;

  returnObj = {
    newObj: newObj,
    equal: equal
  }

  return returnObj;
}

/*
  Step 3: Check if all the values with respect to their corresponding keys are equal
*/

function valEqu(o1, o2, k1) {
  for(let i = 0; i < k1.length; i++) {
    if(o1[k1[i]] !== o2[k1[i]]) {
      console.log('ran');
      return false;
    }
  }

  return true;
}

/*
  If all of these checks pass, the objects are equal.
*/

export default function compareObj (o1, o2) {
  let k1 = Object.getOwnPropertyNames(o1);
  let k2 = Object.getOwnPropertyNames(o2);

  let keyNumB = keyNum(k1, k2);
  let changeOrderB = changeOrder(o1, o2);
  // let keyEquB = keyEqu(k1, k2);
  let valEquB = valEqu(o1, changeOrderB.newObj, k1);

  if(keyNumB === true && changeOrderB.equal === true && valEquB === true) {
    return true;
  }

  return false;
}

希望這會有所幫助。