Reactjs 如何在React中使用axios更新状态？

如何以最高优先级运行useEffect，以便首先更新我的状态，然后再进行进一步处理

我希望我的axios部件应该首先在useEffect中运行，以便我的状态可以首先更新，然后我可以进一步使用它

以下是错误：

TypeError:无法读取未定义的属性“id”

当我控制台显示状态未更新时，它保存空数组

这是我的密码：

const initialState = {
    staff: [],
    isFetching: false,
    hasError: false
}

const Staff = ({ setStaffid }) => {
    const [states, dispatch] = useReducer(reducer, initialState)
    console.log(states)

    useEffect(() => {
        dispatch({
        axios.get("https://example.com/staff")
            .then(response => {
                console.log(response)
                console.log(response.data)
                dispatch({
                    type: "FETCHSUCCESS",
                    payload: response.data.access
                });
            })
            .catch(error => {
                console.log(error);
                dispatch({
                    type: "FETCHFAILURE"
                });
            });
    }, );

    useEffect(() => {
        const id = states.staff[0].id;
        setStaffid(id);
    }, []);

    return (
        <div>

        </div>
    );
};

export default Staff;

const initialState={
工作人员：[]，
isFetching:false，
hasError:错误
}
const Staff=（{setStaffid}）=>{
const[states，dispatch]=useReducer（reducer，initialState）
console.log（状态）
useffect（（）=>{
派遣({
axios.get（“https://example.com/staff")
。然后（响应=>{
console.log（响应）
console.log（response.data）
派遣({
键入：“FETCHSUCCESS”，
有效载荷：response.data.access
});
})
.catch（错误=>{
console.log（错误）；
派遣({
类型：“获取失败”
});
});
}, );
useffect（（）=>{
const id=states.staff[0].id；
设置标签（id）；
}, []);
返回(
);
};
导出默认工作人员；

错误是因为您试图访问未定义的

对象上的属性“id”

更改
useffect

useEffect(() => {
  const staff = states.staff[0];
  if(staff) setStaffid(staff.id);
}, [states.staff]);

要消除错误，只需更改初始状态

const initialState = {
    staff: [{}],
    isFetching: false,
    hasError: false
}

希望对您有所帮助。
为什么您需要这里的多用途效果？