检查所有状态值的更优雅的方式

Question

是否有更优雅的方法来检查我的 React 应用程序中的所有状态变量？我的应用程序中目前有 14 个状态变量，我正在检查每个状态变量的值，如果它们未通过验证（留空）则更新为空字符串，代码如下：

  const [customerName, setCustomerName] = useState(null)
  const [customerPhone, setCustomerPhone] = useState(null)
  const [customerEmail, setCustomerEmail] = useState(null)
  const [customerAddress, setCustomerAddress] = useState(null)
  const [customerPostal, setCustomerPostal] = useState(null)
  const [purchasePrice, setPurchasePrice] = useState(null)
  const [colleagueName, setColleagueName] = useState(null)
  const [branch, setBranch] = useState(null)
  const [branchPhone, setBranchPhone] = useState(null)
  const [otherCompany, setOtherCompany] = useState(null)
  const [furtherInformation, setFurtherInformation] = useState(null)

 function submission() {
    if (customerName === null) {
        setCustomerName('')
    }
    if (customerPhone === null) {
        setCustomerPhone('')
    }
    if (customerEmail === null) {
      setCustomerEmail('')
    }
    if (customerAddress === null) {
      setCustomerAddress('')
    }
    if (customerPostal === null) {
      setCustomerPostal('')
    }
    if (purchasePrice === null) {
      setPurchasePrice('')
    }
    if (surveyType === null) {
      setSurveyType('')
    }
    if (colleagueName === null) {
      setColleagueName('')
    }
    if (branch === null) {
      setBranch('')
    }
    if (branchPhone === null) {
      setBranchPhone('')
    }
    if (company === null) {
      setCompany('')
    }
    if (company === 'Other' && otherCompany===null) {
      setCompany('Other')
      setOtherCompany('')
    }
    if (
      customerName !== ''
      && customerPhone !== ''
      && customerEmail !== ''
      && customerAddress !== ''
      && customerPostal !== ''
      && purchasePrice !== ''
      && surveyType !== ''
      && colleagueName !== ''
      && branch !== ''
      && branchPhone !== ''
      && company !== ''
      && otherCompany !== ''
    ){
      console.log('validation passed')
    }

  };

这个确实有效，所以它不是世界末日，但它似乎不是很优雅，我觉得可以有更简洁的补救措施在那里？

谢谢

Answer 1

也许是这样的。由于所有这些状态变量似乎都是紧密耦合的。我不明白为什么它们不能成为一个对象。

const [sale, setSale] = useState({
  customerName: '',
  customerPhone: '',
  customerEmail: '',
  customerAddress: '',
  customerPostal: '',
  purchasePrice: '',
  surveyType: '',
  colleagueName: '',
  branch: '',
  branchPhone: '',
  company: '',
  otherCompany: '',
})

const checksPasssed = Object.values(sale).every(v => v)

如果您需要更新其中之一，您可以使用 spread。

setSale({...sale, company: 'yahoo'})

Answer 2

选项：

使用useReducer() 钩。来自文档：

useReducer is usually preferable to useState when you have complex state logic that involves multiple sub-values or when the next state depends on the previous one. useReducer also lets you optimize performance for components that trigger deep updates because you can pass dispatch down instead of callbacks.
使用某种状态管理，例如 Redux - if this state needs to be accessed by other components also. You can also use Context API。

你可以把所有这些状态然后使用使用状态：

const [nestedState, setNestedState] = useState({
  a: 1,
  b: 'Shivam',
  c: {
    name: 'Sj',
    age: '20',
  },
});

// Then use `setnestedState()`:

setNestedState(prevState => ({
  ...prevState,
  c: {
    ...prevState.c,
    age: 22,
  },
}));

检查所有状态值的更优雅的方式

More elegant way of checking all state values

javascript

reactjs

react-state