Question

我正在开发使用redux进行状态管理的react应用。在这个程序中，我必须实现搜索页面。当用户在搜索框中键入内容时，应用会在其中显示与该文本输入相关的产品。我有api.XXXXXXX.com/buyer/product/filter?q=${inputValue}这样的api端点。我尝试实现此功能，但无法对此进行过滤。我以前没有做过这个工作，也找不到很好的教程。

这是我的代码

searchAction.js

export const searchProduct =(value) => dispatch => {
  dispatch({
    type: searchActionTypes.SEARCH_PRODUCT_LOAD
  });
  new _rest().get(`/buyer/product/filter?q=${value}`)
      .then(res => {
        console.log(res);
        dispatch({
          type: searchActionTypes.SEARCH_PRODUCT_SUCCESS,
          payload: res
        })
      }).catch(err => {
        console.log(err)
        dispatch({
          type: searchActionTypes.SEARCH_PRODUCT_ERROR,
          error: err
        })
  });
}

searchActionreducer.js

const initialState = {
    isFetching: false,
    searchData: {},
    isFetched: false,
    isError: null
}

export default (state=initialState, action) =>{
    switch (action.type) {
        case searchActionTypes.SEARCH_PRODUCT_LOAD:
            return {
                ...state,
                isFetching: true
            };
        case searchActionTypes.SEARCH_PRODUCT_SUCCESS:
            return {
                ...state,
                isFetching: false,
                searchData: action.payload.data._embedded,
                isFetched: true
            };
        case searchActionTypes.SEARCH_PRODUCT_ERROR:
            return  {
                ...state,
                isFetched: false,
            };
        default:
            return  {
                ...state
            }
    }
}

searchPage.js

class SearchPage extends  React.Component {
    state = {
        inputValue: '',
    }
    componentDidMount() {
        this.props.searchProduct('');
    }
    componentDidUpdate(prevProps, prevState, snapshot) {
        console.log('component update', prevState)
        if(this.state.inputValue !== prevState.inputValue) {
            this.props.searchProduct(this.state.inputValue);
        }
    }


    render() {
        console.log('SearchPage Result', this.props.product);
        const {product} = this.props;
        const {inputValue} =this.state;

        const updateInputValue = (e) => {
            e.preventDefault();
            this.setState({
                inputValue: e.target.value
            })
        }
        return(
            <Grid container>
            <div style={{width: '100%', display:'flex', justifyContent: 'center' }}>
                <form  noValidate autoComplete="off">
                    <TextField value={inputValue} onChange={updateInputValue} id="standard-basic" label="Search Product" />
                </form>
            </div>
                <Grid container spacing={8} style={{padding: '30px'}}>
                    {product && product.productResourceList &&
                    product.productResourceList.map((data, index) => {
                        return(
                            <Grid item xs={6}>
                            <MainCards key={data.productId} data={data} />
                            </Grid>
                        )
                    })}
                </Grid>
            </Grid>
        )
    }
}

const mapStateToProps =(state) => {
    return {

        product: state.search.searchData
    }
}
const mapDispatchToProps = {
    searchProduct,

}
export default  connect(mapStateToProps, mapDispatchToProps)(SearchPage);

在componentDidMount中，最初在安装组件时，我会显示所有产品。之后，在componentDidUpdate中，我尝试从api购买中获取经过过滤的数据，并在api端点this.state.inputValue中传递q作为api.XXXXXXX.com/buyer/product/filter?q=${inputValue}的值。但是组件根本没有更新。

如何在API中使用reactjs添加搜索功能

0 个答案: