Question

所以我阅读了很多帖子，这些帖子似乎和我一样涵盖了相同的主题，但在尝试了所有解决方案之后，我根本无法让它发挥作用，所以就这样了。

我有一个简单的搜索过滤器，我用它来按名称过滤一些食谱。我有一个Redux Store来处理搜索过滤器的状态（值）。在输入字段中输入值时，我的操作适用于reducer，它会更新状态（我可以看到使用console.logs和Redux DevTools）。但不知何故，这不会更新我的道具，它们使用connect和mapStateToProps

进行映射

我之前遇到过的所有答案，指向变异状态，但我试图重复我的reducer的多次迭代，但话又说回来，我可能只是忽略了一些东西。

我的过滤器操作调度：

filter(e){
    Store.dispatch({
        type: 'SET_NAME_FILTER',
        payload: e.target.value
    })
}

我的减速机：

const filterNameReducer = (state = [""], action) => {
    if (action.type === 'SET_NAME_FILTER') {
        return [
            action.payload
        ];
    }
    return state;
}

我的RecipeListContainer：

class RecipeListContainer extends React.Component {    
    render() {
        return (
            <RecipeList recipes={ this.props.recipes } filterName={ this.props.filterName }/>
        )
    }
}
const mapStateToProps = (state) => {
    return {
        filterName: state.filterNameState,
    }
}
module.exports = connect(mapStateToProps)(RecipeListContainer)

我的RecipeList组件：

class RecipeList extends React.Component {
    render() {
        return (
            <ul>
                {this.props.recipes.filter(this.filters, this).map(({ node: recipe }) => {
                    return (
                        <RecipeListItem key={ recipe.id } id={ recipe.id } value={ 0 } name={ recipe.name } time={ recipe.time } type={ recipe.type } tags={ recipe.tags } ingredients={ recipe.ingredients } />
                    );
                })}
            </ul>
        )
    }
    filters() {
        if (this.props.filterName[0].length != 0) {
           return true;
        } else {
           return false;
        }
    }
}

我知道我的过滤器还没那么多，但我已经简单了，所以我只能看看它是否得到更新。并且它过滤正确，如果我改变我的减速器的初始值。所以不应该那样。

另外，我在GatsbyJS中使用它，但根据他们的文档和示例，这应该不是问题。但我可能错了？

提前多多谢意！如果我错过了一些可以找到解决方案的内容，请告诉我，我很想在SO上发帖。

如果redux状态改变，组件道具将不会在状态之后更新

0 个答案: