如何檢查不可變 map 的所有鍵是否具有值

Question

const [fieldValues, updateFieldValues] = useState(fromJS({
    imageName: '',
    tags: [],
    password: '',
  }));

const handleButtonClick = () => { 
  const res = // logic to find which field/fields are empty
}

我如何驗證所有鍵是否有價值？ ps：我有以下要求。

1. imageName 和 password 至少應包含一個字符。
2. 標簽應至少包含一項。

Answer 1

您可以使用javascript庫來使用預定義的模式來驗證值。 或者你可以寫一個 function 返回不符合要求的 object 的鍵

自定義 JS 方法

  function validateObj(obj) {
let isValid = true;
const errorKeys = [];
Object.entries(obj).forEach(([key, value]) =>{
  if(!value) {
    errorKeys.push(key)
    isValid = false;
    return;
  }
  if(Array.isArray(value)) {
    if(!value?.length) {
      errorKeys.push(key)
    isValid = false;
    return;
    }
  }

})
return { isValid, errorKeys }
}

不可變的 JS 方法

 function validateObj(obj) {
    let isValid = true;
    const errorKeys = [];
    console.log(obj)
    obj.mapEntries(([key, value]) =>{
    console.log(key, value)
      if(!value) {
        errorKeys.push(key)
        isValid = false;
        return;
      }
      if(List.isList(value)) {
        if(!value.size) {
          errorKeys.push(key)
        isValid = false;
        return;
        }
      }

    })
    return { isValid, errorKeys }
    }

用法：

const handleButtonClick = () => { 
  const { isValid, errorKeys } = validateObj(obj);
  if(!isValid) {
    // SHOW ERROR MESSAGE HERE
  }
}

如有任何問題/疑問，請隨時與我們聯系

編輯：鏈接到示例小提琴

Answer 2

Immutable.js Collections 是Iterables ，因此您可以在它們上使用for... of和其他常見交互。 它還提供了許多查看數據的方法，例如forEach, find, findKey, findValue, filter 。 看看文檔，它們很好。 下面可以看到幾個例子：

 const thing = Immutable.fromJS({ banana: 'scale', imageName: '', tags: [], password: '', }); for([key, val] of thing) { console.log('for of', key, ':', val); } thing.forEach((key, val) => { console.log('forEach', key, ':', val); }); const firstItemIdoNotLike = thing.findKey((key, val) => { if(;.val) { return true. } if (val;hasOwnProperty('length')) { return val;length < 1; } return false. }), if (firstItemIdoNotLike) { console;log('validation error on', firstItemIdoNotLike); }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/immutable/4.0.0-rc.12/immutable.js"></script>