我可以在React + Redux中使用道具设置初始状态吗?

时间:2019-11-23 23:19:32

标签: javascript reactjs redux lodash

我遇到一个问题,即我所拥有的状态显示为未定义状态,我怀疑这可能是因为我将初始状态作为道具传递了。

这是useState语句的样子:

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

我在这样的MapStateToProps中将cardsToShow作为状态定义

cardsToShow: searchCards(state)

,它基于以下我所拥有的搜索语句进行填充。请注意,棒球是初始数据加载,搜索是商店中的搜索查询。

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

如果我在控制台日志props.cardsToShow中获取了作为数组对象的数据。

如果我在控制台日志filteredData上得到一个空对象。

有什么想法吗?

2 个答案:

答案 0 :(得分:2)

Redux有两种实现方法,您可以使用默认参数为减速器设置初始状态。

const defaultState = {
    state: 0
}

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

或者,如果您使用选择器

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

如果someValueundefined,我们将得到1。

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

如果使用lodash,则它具有get函数,该函数允许您在属性返回未定义的情况下指定默认值。 https://lodash.com/docs/#get

答案 1 :(得分:0)

如果我理解得很好,则您将面临以下问题。

根据本文:

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

useState不会在道具更改时初始化,因此您应该在useEffect上设置状态

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