javascript - 如何使用 api 在 reactjs 中添加搜索功能

Question

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

这是我的代码

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
            }
    }
}

搜索页面.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中的值传递。但是组件根本没有更新。qapi.XXXXXXX.com/buyer/product/filter?q=${inputValue}

标签： javascriptreactjsreduxreact-redux