javascript - useSelector 在一个页面中返回初始状态，在其他页面中返回正确状态

Question

我有以下情况：在组件<Home />中，我有一个组件让我成为我，<AutocompleteSearch />它显示书籍列表，当我们单击一本书时，它会执行 api 调用以获取有关单击的书籍的详细信息并发送保存在书籍中状态，当前的书。我的问题是我在<Home />组件中有一个侦听器，当它被触发时，它会检查某个值是否与当前书籍 ID 相等，为此我使用useSelector来获取当前书籍<Home />，但我收到一条错误消息，指出 currentBook是未定义的，我打印了书籍状态，它打印了一个空对象，它是初始状态。奇怪的是，我的 中还有另一个组件，我<Home />将其作为当前书籍的道具传递给它，并且在BookProfile当前的书本道具是一个很好的对象，从服务器获取，因此状态更新正确，但是当我尝试访问当前书本时，<Home />它看起来好像从未改变过，而且我还想说，我尝试使用相同的useSelector 在 home 的另一个子组件中，它也在这里工作，它从服务器登录控制台一个精细对象，代表AutocompleteSearch.

我将插入一些代码片段：

      const currentUser = useSelector(state => state.users.currentUser)
      const currentBook = useSelector(state => state.book.currentBook)
      
      return (
       ...........
       {openSearchBar && (
          <AutoCompleteSearch
            suggestionsList={bookListForSearchBar}
            elementClickAction={setMainContent}
          />
        )}
       ...........
       <BookProfile
            book={currentBook}
            user={currentUser}
          />
...
}

  const bookListClicked = async book=> {
    await dispatch(getCurrentBook(book.id))
  }
const currentBookReceived = book=> ({
  type: actions.CURRENT_BOOK_RECEIVED,
  anime,
})

export default function News() {
  const currentUser = useSelector(state => state.users.currentUser)
  const currentBook = useSelector(state => state.book.currentBook)

  return (
    <>
      <div
        onClick={() => {
          console.log(currentUser)
          console.log(currentBook)
        }}>
        News
      </div>
    </>
  )
}

在News组件状态下工作正常，它记录了正确的书，但Home它记录了未定义的。

let initialState={}

export default (state = initialState, action) => {
  switch (action.type) {
    case actions.CURRENT_BOOK_RECEIVED:
      return { ...state, currentBook: action.book }

    default:
      return state
  }
}

此外，在登录成功后从服务器获取 currentUser，然后通过调度保存在用户状态中，然后我在 Home 的控制台中打印它，它应该是这样，而不是像 currentBook 那样未定义。

我是前端开发的新手，我不太了解事情是如何工作的，我不明白为什么在一个组件中可以很好地看到状态而在另一个组件中却不是。

标签： javascriptreactjsreduxreact-reduxweb-frontend