这个问题可能更多的是关于观点而不是事实,但我不确定,所以我想问。
我正在构建一些将显示数据并允许编辑的表单,字段数据来自 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);
}, [] )
老实说,这感觉比第一个选项更干净,但是有很多地方都会发生这种情况,并且必须在每个地方都这样做,感觉会适得其反。
感谢任何帮助/见解。
最佳答案
编辑:事实证明OP正在使用Material UI来实现此目的..意思是,输入显示警告的原因是由于Material UI使用了PropTypes。我建议OP为 <Input />
创建一个包装器组件并传递所有 Prop 。在包装器组件内部,您可以执行以下操作:<InputWrapper value={props.value || ""} {...rest} />
这涵盖了一些事情..
输入包装器:
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({two: props.two || ""})</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>
关于javascript - 确保没有空值的最佳方法是什么,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/57733292/