我可以在 React + Redux 中使用 props 設置初始狀態嗎？

Question

我遇到了一個問題，我的狀態顯示為未定義，我懷疑這可能是因為我將初始狀態作為道具傳遞。

下面是 useState 語句的樣子：

const [filteredData, setData] = useState(props.cardsToShow);

我將 cardToShow 作為在 MapStateToProps 中定義的狀態，如下所示

cardsToShow: searchCards(state)

它是根據我擁有的以下搜索語句進行填充的。 請注意，棒球是初始數據加載，搜索是商店中的搜索查詢。

const searchCards = ({ baseball, search }) => {
  return search
    ? baseball.filter(a =>
        a.title[0].toLowerCase().includes(search.toLowerCase())
      )
    : baseball;
};

如果我控制台日志props.cardsToShow我得到數據，它是一個數組對象。

如果我控制台記錄filteredData我會得到一個空對象。

有任何想法嗎？

Answer 1

Redux 有多種實現方式，您可以使用默認參數為您的 reducer 設置初始狀態。

const defaultState = {
    state: 0
}

function counter(state = defaultState, action) {
...

或者，如果您使用選擇器

const getSomeValues = store => store.someValue || 1

如果someValue是undefined ，我們將得到 1 。

更深入的解釋： https : //redux.js.org/recipes/structuring-reducers/initializing-state

如果你使用 lodash，它有get函數，如果屬性返回 undefined，它允許你指定默認值。 https://lodash.com/docs/#get

Answer 2

如果我理解得很好，您將面臨下面介紹的問題。

根據這篇文章：

https://learnwithparam.com/blog/how-to-pass-props-to-state-properly-in-react-hooks/

useState 不會在 props 更改時初始化，因此您應該在 useEffect 上設置狀態

useEffect(() => {
    setData(props.cardsToShow);
}, [props]);