反应钩子没有设置对象状态与异步等待.始终未定义

Question

为名为updateSOR的组件编写了一个UpdateSOR函数，该函数可以从名为SOR的上一页进行导航。

UpdateSOR是一种应该从API预先填写的表格。因此，如果用户直接访问此页面或从上一页，我确实会在 useEffect 中进行下面编写的 api 调用，并设置 const [SOR] 的值，该值将在页面加载后立即在表单中用于预填充它。

export default function UpdateSOR(props) {
const [SOR, setResult] = React.useState({}); // empty object
useEffect(() => {
const getSOR = async () => {
console.log("Inside async");
await QueryService.getSOR(props.match.params.sorID).then(
(result) => {
console.log("Inside await then");
if (result.status === 200) {
setResult(result.data.data.dataItems); // set the value for SOR here 
console.log("result.data.data.dataItems" ,result.data.data.dataItems);
}
}
).catch(error => {
console.error(error);
});
getSOR();
}
}, []);

console.log("Value of SOR" , SOR) // value of sor is empty object which was during initialization and SOR is not coming from the api written above in useEffect :(
return (
<Container fluid={true} className="pt-4 pb-4 pl-0 pr-0">
<Row className={`align-items-center ${classes.header}`}>
<Col lg="10">
<h4 className="pl-4">Form SOR</h4>
</Col>
<Col lg="1">
<Button type="submit" variant="contained" color="primary" onClick={handleSave} className="mr-3 float-right">
Save
</Button>
</Col>
<Col lg="1">
<Button variant="contained" color="primary" onClick={handleCancel} className="mr-3 float-right">
Cancel
</Button>
</Col>
</Row>
<form className={`${classes.form} ${classes.body}`} noValidate autoComplete="off">
<Row>
<Col lg="2" onChange = {(event) => setSelectedSorName(event.target.value)}>
<CommonInput
id="sor_name"
label="SOR Name"
defaultValue={SOR.SOR_NAME}
disabled={false}
multiline={false}
rows="1" />
</Col>
</Row>
)

当我尝试控制台.log SOR 的值时，我没有从 api 获取值。 我在这里做任何错误吗？我认为一种可能性是我没有正确使用异步等待。这是我的查询服务文件，我在此更新SOR文件中调用此api的位置

function getSOR(id) {
if(id) {
return axios.get(`${Constants.API_URL}/SOR?id=${id}`);
} else {
return axios.get(`${Constants.API_URL}/SOR`);
}
}

Answer 1

你不能使用async await with then catch。

你的getSOR是异步函数，你不能使用.then .catch块

这样做不是：

const[SOR, setSOR] = useState();
useEffect(() => {
const fetchSOR = async () => {
try {
const {data} = await QueryService.getSOR(id);
setSOR(data);
} catch(e) {
// if response is rejected this will execute
console.log(error);
}
}
fetchSOR();
}, []);