当我在渲染或更改某些依赖项时获取数据时,它会正确地更新Redux存储中的数据,但在Console.Log时,它会给出‘Undefined’.

我正在开发预订系统,想在指定的日期取回已经预订的时间

/// Fetch data on render the component and try to console.log
     useEffect(() => {
    axios
      .get(
        `http://localhost/healthboyz/index.php/booked/${
          formData.doctor_id
        }/${moment(formData.date).format('YYYY-MM-DD')}`
      )
      .then((res) => setBookedHrs(res.data))
      .then(() => console.log(bookedHrs))
      .catch((e) => console.log(e));}, 
    [formData.doctor_id, formData.date]);
/// Hours reducer 
 const hoursReducerDefaultState: {
  bookedHrs: string[];
} = {
  bookedHrs: [],
};

export const hoursReducer = (
  state = hoursReducerDefaultState,
  action: {
    type: string;
    data: string[];
  }
) => {
  switch (action.type) {
    case 'SET_BOOKED_HRS':
      return [...action.data];
    default:
      return state;
  }
};

推荐答案

这里的问题实际上与Redux的州设置方式有关:

假设hoursReducer对整个hoursReducerDefaultState负责,即:

type HoursReducer = {
  bookedHrs: string[];
};

 const hoursReducerDefaultState: HoursReducer = {
  bookedHrs: [],
};

然后,您需要将Redux状态设置为要更新的更新状态:

export const hoursReducer = (
  state = hoursReducerDefaultState,
  action: {
    type: string;
    data: string[];
  }
) => {
  switch (action.type) {
    case 'SET_BOOKED_HRS':
      // Remember to include the previous state using the "spread" operator
      return {
        ...state,
        bookedHrs: action.data
      }
    default:
      return state;
  }
};

注意:我还假设您想要完全替换bookedHrs的值.

Reactjs相关问答推荐

如何在useEffect中使用useParams()

无法使用#13;或br将新行设置为文本区域'"&"<>

关于同一位置的不同组件实例的react S规则被视为相同组件

当我try 部署我的Reaction应用程序时,为什么在此PrevState语句中收到语法错误?

如何使图像zoom 并移动到点击点

如何删除 bootstrap 手风琴上的边框

验证 Yup 中的对象项

在reduce()方法上得到NaN

如何管理可重用无线电输入的 React 状态?

useRef 不关注模态

将水平滚动视图添加到底部导航选项卡

使用 nextjs App Router 在动态客户端进行服务器端渲染

如何到达类组件中的状态?

为什么刷新页面时我的localStorage PET值变成空字符串?

在 React 中,为什么在使用 addEventListener 时外部元素上的 onclick 事件监听器在内部元素的 onclick 事件监听器之前执行?

如何从 graphql/apollo 中的缓存中清除多个查询

用 jest 测试包裹在 redux 和 router 中的组件

React Native - 身份验证 - 触发值以更改 Auth 和 UnAuth 堆栈导航器

如何在props 更改时运行自定义挂钩?

为什么我从另一个组件收到错误?