ReactJS Redux变量未正确更新

o0lyfsai  于 2023-06-23  发布在  React
关注(0)|答案(1)|浏览(74)

我用redux devtools验证了调度是否正确进行,并验证了值是否正确设置。
问题是当FetchUpdateList()运行时,它使用的是updateLog存储变量的旧状态值。
下面是我的store变量:var updateLog = useSelector((state) => state.updateLog.value);
我的复选框触发函数:<Checkbox checked={checkBoxActive} onChange={HandleCheckBox} />

function HandleCheckBox(event) {
        dispatch(setUpdateLog({ 'start': 0, 'end': 10, 'viewOneUser': !updateLog.viewOneUser }))
        console.log("...Running HandleCheckBox()...")
        console.log(event.target.checked);
        setLoadingMore(true);
        setCheckBoxActive(event.target.checked);
        ResetValues();
        setTimeout(() => FetchUpdateList(), 2000);
    }

    function ResetValues() {
        console.log("...Running ResetValues()...")
        setUpdateList([]);
        setMoreEnabled(true);
    }

下面是redux devtools,显示了action和当前值:

下面是FetchUpdateList()运行后的值:

下面是存储变量作为旧值读取的函数:

async function FetchUpdateList() {
        setLoadingMore(true);
        console.log(updateLog);
        if (updateLog.viewOneUser) {
            var call = await GetUpdateListAPI(props.instance, props.accounts, updateLog.start, updateLog.end, null, profileData.user == "" ? localStorage.getItem('user') : profileData.user);
        } else {
            var call = await GetUpdateListAPI(props.instance, props.accounts, updateLog.start, updateLog.end, null, null);
        }
        if (call.Success) {
            var list = [];
            setUpdatesLength(call.Length);
            dispatch(setUpdateLog({ 'start': updateLog.start + 10, 'end': updateLog.end + 10, 'viewOneUser': updateLog.viewOneUser }))

这里是我设置Redux商店的地方:

const updateLogSlice = createSlice({
    name: 'updateLog',
    initialState: {
      value: {'start': 0, 'end': 10, 'viewOneUser': false},
    },
    reducers: {
      setUpdateLog: (state, action) => {
        state.value = action.payload
      },
      
    },
  })
export const { setUpdateLog } = updateLogSlice.actions
export default configureStore({
  reducer: {
    ...,
    updateLog: updateLogSlice.reducer,
  },
})
cygmwpex

cygmwpex1#

FetchUpdateList是从HandleCheckBox函数的updateLog状态上的闭包调用的。如果FetchUpdateList需要访问当前状态值,那么简单的解决方案是导入store并通过store.getState方法访问状态。
示例:

import store from '.../path/to/store';

...

async function FetchUpdateList() {
  setLoadingMore(true);

  const state = store.getState();          // <-- current state value
  const updateLog = state.updateLog.value; // <-- current updateLog value

  console.log(updateLog);

  if (updateLog.viewOneUser) {
    var call = await GetUpdateListAPI(
      props.instance,
      props.accounts,
      updateLog.start,
      updateLog.end,
      null,
      profileData.user == ""
        ? localStorage.getItem('user')
        : profileData.user
    );
  } else {
    var call = await GetUpdateListAPI(
      props.instance,
      props.accounts,
      updateLog.start,
      updateLog.end,
      null,
      null
    );

  }
  if (call.Success) {
    var list = [];
    setUpdatesLength(call.Length);
    store.dispatch(setUpdateLog({
      start: updateLog.start + 10,
      end: updateLog.end + 10,
      viewOneUser: updateLog.viewOneUser
    }))
  ...

相关问题