홈>
데이터를 렌더링하고 (내 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
관련 질문
- javascript : Redux-thunk를 사용한 디스패치 기능
- javascript : 디스패치 후에도 useSelector가 업데이트되지 않음
- reactjs : 상점의 빈 초기 상태를 피하는 방법은 무엇입니까?
- javascript : React-Redux: 주문/장바구니의 테이블에 수량 값 추가
- reactjs : React.js 앱에서 Redux를 쉽게 사용하는 방법
- reactjs : redux 상태가 정의되지 않은 이유는 무엇입니까?
- reactjs : 오류: 작업은 일반 개체여야 합니다. 비동기 작업에 사용자 지정 미들웨어 사용 -Redux Toolkit
- javascript : redux 저장소에서 업데이트된 상태를 가져올 수 있지만 수신기 구성 요소에서 업데이트된 상태 내부의 개체에 액세스할 수 없습니다.
- reactjs : 간단한 redux에서 기본 React.js CRUD 앱을 만드는 방법(react-redux 또는 redux-toolkit을 사용하지 않음)
- reactjs : React createRef가 Redux에서 작동하지 않습니다. childRef.current는 항상 null을 반환합니다.
당신의
mapStateToProps
이유 입력시 호출되지 않으며, redux 저장소가 업데이트 될 때만 호출되기 때문입니다.mapStateToProps
를 다시 실행할 수 있도록 redux 저장소에 검색 입력 상태를 저장하는 것이 좋습니다. 그리고 당신의 선택기 변경.