Question

我对React还是很陌生，我想为我制作的Wiki创建搜索栏。我正在为搜索栏（https://material-ui.com/api/autocomplete/）使用Material UI的自动完成功能。我的目标是做到这一点，以便当用户输入搜索并提交搜索时（例如，单击建议的选项或按Enter键），它将加载用户搜索的帖子（将为Post组件加载数据）。当我单击搜索选项之一时，URL更改为正确的帖子ID（/ posts /：id），但不会加载新帖子。取而代之的是，我得到“哈希历史记录不能按相同的路径”，这似乎还会导致无限循环，直到导致空白屏幕。我已经尝试了在类似问题上发现的一些解决方案（使用withRouter，使用getOptionSelected来获取ID，history.push），而且似乎已经接近目标，但似乎没有用。如果有人能指出我正确的方向，那就太好了！这是我用于搜索栏的代码：

import React, { Component } from 'react';
import TextField from '@material-ui/core/TextField';
import Autocomplete from '@material-ui/lab/Autocomplete';
import { withRouter } from 'react-router-dom';

const STRAPI_URL = process.env.REACT_APP_STRAPI_URL;

class WikiSearch extends Component {
    constructor(props) {
        super(props);
    
        this.state = {
          loading: true,
          posts: []
        }
      }
    
      async componentDidMount() {
        let response = await fetch(`${STRAPI_URL}/posts`);
        if (!response.ok) {
          return
        }
    
        let posts = await response.json()
        this.setState({ loading: false, posts: posts })
      }
    render() {
        return (
            <div style={{ width: 300 }}>
            <Autocomplete
                id="combo-box-demo"
                options={this.state.posts}
                getOptionLabel={option => option.title}
                getOptionSelected={(option, value) => { if(value.id === option.id) { this.props.history.push(`/posts/${value.id}`); }} }
                renderInput={(params) => (
                <TextField {...params} label="Search" margin="normal" variant="outlined" />
                )}
            />
            </div>
        );
    }
}

export default withRouter(WikiSearch);

现在，我确实遇到了与导航抽屉类似的问题，但是我通过将其添加到Post组件中来对其进行了修复：

  async componentDidUpdate(prevProps) { // will change post based on route id
    if (this.props.match.params.id !== prevProps.match.params.id) {
      let response = await fetch(`${STRAPI_URL}/posts/${this.props.match.params.id}`)
      let data = await response.json()
      this.setState({
        loading: false,
        post: data
      })
    }

感谢您的阅读。感谢您的帮助！

如何在React Router中使用Material-UI自动完成功能

0 个答案: