如果我有一个类似于下面的组件:
import React, { useState } from "react";
import ReactDOM from "react-dom";
function calculateNewValueAndMaybeError(test) {
try {
// do something with test that might error
// const newTest = functionThatMightError(...)
// if it doesn't error, return { value: newTest, error: '' }
} catch (err) {
// is it correct to now return this in case of error?
// return { value: test.value, error: 'Something went wrong' }
}
}
function App() {
const [test, setTest] = useState({ value: "", error: "" });
return (
<div>
<p>Test: {test.value}</p>
<p>Error: {test.error}</p>
<button onClick={() => setTest(calculateNewValueAndMaybeError(test))}>
Click me
</button>
</div>
);
}
const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);
我有一个按钮,应该改变我的变量状态test
,有没有办法处理错误,而不必在所有时间内同时传递值和错误的对象?
否则,这不会产生必要的代码,有时如下所示:
onChange={() => setTest({ value: e.target.value, error: test.error })}
您想要更新test.value
的值但保留test.error
的值的位置。
我觉得我有一些显而易见的东西。
谢谢!
需要合并两个状态表明它们应该被处理为不同的状态:
function App() {
function calculateNewValueAndMaybeError(test) {
try {
...
setValue(...);
setError(null);
} catch (err) {
setError('Something went wrong');
}
}
const [error, setError] = useState(null);
const [value, setValue] = useState('');
return (
<div>
<p>Test: {value}</p>
<p>Error: {error}</p>
<button onClick={() => setTest(calculateNewValueAndMaybeError(test))}>
Click me
</button>
</div>
);
}
或者自定义状态钩子可用于合并error
字段:
const useErrorState = initialState => {
const [state, setState] = useState({ ...initialState, error: null });
const setErrorState = useCallback(stateUpdater => {
if (typeof stateUpdater === 'function') {
setState(state => {
try {
return {error: null, ...stateUpdater(state) };
} catch (error) {
return {...state, error };
}
});
} else {
setState({error: null, ...stateUpdater });
}
}, []);
return [state, setErrorState];
}
另一种可能性是将错误处理移动到父组件(可能具有更高阶组件)并在那里捕获错误。