>

데이터를 렌더링하고 (내 redux 저장소에 있음) 검색 막대가 있고 검색 입력을 기반으로 데이터 결과를 필터링하려고합니다. 라이브러리 재 선택을 사용하고 있으며 작동하지 않는 것 같습니다. 나는 그들의 문서를 읽고 나는 여러 가지를 시도했다 :

검색 입력을 로컬 상태로 저장하고 인수로 전달하고 싶지만 내가 가지고 있지 않은 소품에 대해서만 작동하는 것 같습니다 (비교 상태에서 입력을 저장하는 것처럼). 그런 다음 onChange 함수에서 선택기 함수를 호출하여 입력을 전달했습니다. 여기서 문제는 입력을 수신하지만 데이터는 수신하지 않는 것입니다.

다른 사람이 도와 줄 수 있습니까?

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 store에 저장합니다. onChange 함수 내에서 actioncreator를 호출하여 입력을 반환하고 (입력) 환원 기가 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를 다음과 같이 변경했습니다.

선택한 데이터 가져 오기 ...

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

문제 :

  • 오류가 발생했습니다 : canno filter null-그러나 getData 함수 내에서 로그 데이터를 콘솔로 만들 때 객체로 가득 찬 배열을 얻습니다.

  • 또한 액션 제작자를 입력하여 테스트했지만 통찰력 입력 함수 (선택기 파일에서)는 정의되지 않았습니다. 실제로 내 줄의 첫 번째 값으로 내 빈 문자열이 있어야합니다.


  • 답변 # 1

    당신의 mapStateToProps 이유  입력시 호출되지 않으며, redux 저장소가 업데이트 될 때만 호출되기 때문입니다. mapStateToProps 를 다시 실행할 수 있도록 redux 저장소에 검색 입력 상태를 저장하는 것이 좋습니다.  그리고 당신의 선택기 변경.

  • 이전 swift - Firestore에서 일회성 리스너를 추가하거나 활성화하는 방법
  • 다음 dict에서 상속 한 항목의 1-1 매핑 인 Python 클래스