Question

我正在渲染数据（在我的redux商店中有它），我有一个搜索栏，想要根据搜索输入过滤数据结果。我正在使用重新选择库，似乎无法使其工作。我阅读了他们的文档，并尝试了各种各样的事情：

我将搜索输入存储在我的本地状态，并希望将其作为参数传递，但它似乎只适用于我没有的道具（因为我在comp状态下保存输入）然后我尝试在我的onChange函数中调用我的选择器函数，传入输入 - ＆gt;问题在于，我接收输入，但不接收数据。

有人可以帮忙吗？

selector.js

import {createSelector} from 'reselect'

const dataSelector = (state, props) => {
    return state.data;
}

export const filterResults = (data, input) => {
    return createSelector(
        dataSelector,
        data => data.filter((item) => item.symbol.toLowerCase().includes(input) || item.name.toLowerCase().includes(input))
    )
}

容器：

class App extends React.Component {
constructor(props){
    super(props);
    this.state = {
        searchInput: ""
    }
}

filterData = (e)=> {
    const input = e:
    this.setState({
        searchInput:input
    })
}

render (){
    ...
    this.props.products.data.map((item, index) =>...
    ...
    <input
    onChange={this.filterData}
    />
 }

}

function mapStateToProps(state, props) {
    return {
        products: state.data,
        filteredData: filterResults(state,this.state.input)
    }
}

export default connect(mapStateToProps, { actioncreator })(App)

更新：

我更改了代码，现在将输入存储在我的redux商店中。我在我的onChange函数中调用我的actioncreator，它返回（仅）输入，我的（输入）reducer也在我的mapstatetoprops函数中返回。

选择器：

import {createSelector} from 'reselect'

const selectedData = state => state.data;
const input = state => state.searchFilter.searchInput;

const getData = (data, searchInput) => {
    return data.filter((item) => item.name.toLowerCase().includes(searchInput))
}

export default createSelector(
    selectedData,
    input,
    getData
)

在我的容器中，我将mapStateToProps更改为：

从...导入selectedData

function mapStateToProps(state) {
    return {
        products: state.data,
        searchFilter: state.searchFilter,
        selected: selectedData(state)
    }
}

问题：

我得到错误：canno过滤器null - 但是当我在getData函数中控制日志数据时 - 我得到一个充满对象的数组，因此它不为空
此外，我测试了我的动作创建者的输入并且它有效，但是洞察输入函数（在我的选择器文件中）未定义 - 实际上应该是一个空字符串，因为它是我的reducer中的初始值。

Answer 1

您的mapStateToProps未被输入调用的原因是因为它只被称为when the redux store is updated。我建议你将搜索输入状态存储在redux存储中，以便能够在更改时重新运行mapStateToProps和你的选择器。

React / Redux / Reselect - 如何传入参数，存储在本地状态以用于过滤存储在redux存储中的数据？

1 个答案: