javascript - 确保没有空值的最佳方法是什么

Question

这个问题可能更多的是关于观点而不是事实，但我不确定，所以我想问。

我正在构建一些将显示数据并允许编辑的表单，字段数据来自 props(因为父组件正在使用 GraphQL 查询来提取更大的数量并传递给每个子组件)。

我发现一些输入数据的计算结果为空(因为它没有从查询传回)，这会引发警告，因为输入不喜欢被分配空值。

我的问题是，在传递这些值时，对每个变量运行检查并在需要时分配空字符串的最简洁方法是什么？

到目前为止，我尝试过的两个选项是:

有条件地将每个状态分配给状态对象，但这感觉很笨拙并且代码很多:

const [state, setState] = useState({
    telephone: props.telephone ? props.telephone : '',
    nickname: props.nickname ? props.nickname : ''
    etc...
});

或者在设置状态之前定义一个映射 props 并检查值的函数:

useEffect( () => {
    let state_arr = {};
    Object.keys(props).map( (key) => {
        if( !props[key] ) state_arr[key] = '';
        else state_arr[key] = props[key];
    } );
    setState(state_arr);
}, [] )

老实说，这感觉比第一个选项更干净，但是有很多地方都会发生这种情况，并且必须在每个地方都这样做，感觉会适得其反。

感谢任何帮助/见解。

Answer 1

编辑:事实证明OP正在使用Material UI来实现此目的..意思是，输入显示警告的原因是由于Material UI使用了PropTypes。我建议OP为 <Input /> 创建一个包装器组件并传递所有 Prop 。在包装器组件内部，您可以执行以下操作:<InputWrapper value={props.value || ""} {...rest} />这涵盖了一些事情..

Live Demo

输入包装器:

import React from 'react';
import { Input } from '@material-ui/core';

export default function InputWrapper({ value, ...rest }) {
  return <Input value={value || ""} {...rest} />
}

使用中的InputWrapper:

import React, { useState, useEffect } from 'react';
import { render } from 'react-dom';
import InputWrapper from './InputWrapper.js';


function App(props) {
  const [state, setState] = useState({});

  useEffect(() => {
    setState({
      name: props.name,
      age: props.age,
      hairColor: props.hairColor,
    })
  }, [props.name, props.age, props.hairColor]);

  const handleChange = (event, inputType) => {
    setState({...state, [inputType]: event.target.value})
  }

  return(
    <div>
      {/* Shows that you can pass through native <Input /> props: */}
      {/* state.name is null here! Warning is NOT thrown in the console! */}
      <InputWrapper value={state.name} fullWidth onChange={e => setState({...state, name: e.target.value})} />
      <InputWrapper value={state.name} multiline onChange={e => setState({...state, name: e.target.value})} />

      {Object.keys(state).map((item, index) => {
        return (
          <div>
            <InputWrapper 
              key={`${item}_${index}`} 
              value={state[item]} 
              onChange={e => handleChange(e, item)} />
          </div>
        );
      })}
    </div>
  );
}

render(
  <App name={null} age={44} hairColor="blue" />, 
  document.getElementById('root')
);

<小时/>

原始答案:

您的用例是什么？没有理由运行检查并分配空字符串...

如果您尝试强制使用某些属性，请查看 PropTypes ...如果您不想强制使用某些 Prop ，我建议在使用变量期间检查值。即使您最初将其设置为空字符串，您仍然可能会遇到错误 - 我不明白您从空字符串中获得什么。

我不明白用例 - 您能否详细说明为什么需要将其设置为空字符串？

如果您确实愿意，您可以验证如下:useState({two: props.two || ""}) ...但这仍然是不必要的..

// Notice how prop "two" is not being used..

function Test(props) {
  const [state, setState] = React.useState({
    one: props.one,
    two: props.two
  })
  
  return(
    <div>
      <p>{state.one}</p>
      <p>Even though <code>state.two</code> does not exist, there are no errors.. (at least for this demonstration)</p>
      <input type="text" value={state.two} />
      <input type="text" value={state.two} defaultValue={"default"} />
      <p><i>If you really wanted to, you could verify like:</i><code>useState(&#123;two: props.two || ""&#125;)</code><i>...but it is still unnecessary..</i></p>
    </div>
  );
}

ReactDOM.render(<Test one="I AM ONE" />, document.body)

code {
  margin: 0 10px;
  padding: 3px;
  color: red;
  background-color: lightgray;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.9.0/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.6/umd/react-dom.production.min.js"></script>