Est-il possible d'obtenir le mot-clé avant la requête get au serveur unsplash afin de déclencher une recherche en direct ? Je voudrais utiliser la saisie de l'utilisateur pour le mot-clé. Ceci est mon code sur le front-end

class App extends Component {
  constructor () {
    super()

    this.state = {
      images: [],
      keyword: '',
      count: 15,
      start: 1
    }
  }

  componentDidMount() {
    const { count, start, keyword } = this.state;
    axios
      .get(`api/photos?count=${count}&start=${start}&keyword=${keyword}`)
      .then(res => this.setState({images: res.data.results}))
  }

  searchChange = (e) => {
    this.setState({ keyword: e.target.value })
  }
1
Alex Gooner Arteta 25 janv. 2020 à 08:00

1 réponse

Meilleure réponse

Je ne sais pas si j'ai bien compris votre besoin, mais si vous souhaitez effectuer une recherche en temps réel, vous pouvez utiliser les méthodes de cycle de vie componentDidUpdate et shouldComponentUpdate, comme ci-dessous :

export default class App extends React.Component{
    constructor(){
        super()
        this.state = {
            images: [],
            keyword: '',
            count: 15,
            start: 1
        }
        this.searchChange = this.searchChange.bind(this)
    }
    shouldComponentUpdate(nextProps, nextState){
        return nextState.keyword != this.state.keyword
    }
    componentDidUpdate(){
        const { count, start, keyword } = this.state;
        axios
          .get(`api/photos?count=${count}&start=${start}&keyword=${keyword}`)
          .then(res => this.setState({images: res.data.results}))
    }
    searchChange(e) {
        this.setState({ keyword: e.target.value })
    }
    render(){
        return <div>
            <input type="text" onChange={this.searchChange} />
        </div>
    }
}
0
aira 25 janv. 2020 à 05:40