如何使用 Axios 在 React 中实现 onClick componentDidMount()

Question

I am trying to make a movie search function using React, Axios, and movieDB API. The functionality I am trying to implement right now is typing in a movie into the search bar and clicking the submit button will return the movie title as an H1 element.

My onClick function does not work: <button onClick={(e)=>clickHandler()}>submit</button>

componentDidMount() will work only when the page refreshes and you cannot search for anything as the submit button is broken.

I am not sure how to implement this, but I would also not mind if I could get it to search by hitting enter instead of using a button, whichever is easier.

Here is my code so far.

App.js

import React from "react"
import Movielist from './components/Movielist'



function App() {
    return (
        <div>
            <input type="search" id="search" />
            <button onClick={(e)=>clickHandler()}>submit</button>
            <h1 id="title">title</h1>
            <Movielist />
        </div>

    )
}

export default App

Movielist.js

import React from 'react';

import axios from 'axios';

export default class Movielist extends React.Component {
  state = {
    title: ""
  }

    componentDidMount() {
    const API_KEY = '***********************';
    const query = document.getElementById('search').value;
    axios.get(`https://api.themoviedb.org/3/search/movie?api_key=${API_KEY}&query=${query}`)
      .then(res => {
        const title = res.data['results'][0]['title'];
        this.setState({ title });

      })

  }

  render() {
    return (

    <h1>{this.state.title}</h1>

    )
  }
}

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';

ReactDOM.render(
    <App />,
    document.getElementById('root')
);

Answer 1

import React from 'react';

import axios from 'axios';

export default class Movielist extends React.Component {
  state = {
    title: ""
  }

    clickHandler = (event) => {
        if (event.keyCode === 13) {
           const query = event.target.value;
           const API_KEY = '***********************';
    axios.get(`https://api.themoviedb.org/3/search/movie?api_key=${API_KEY}&query=${query}`)
      .then(res => {
        const title = res.data['results'][0]['title'];
        this.setState({ title });

      })
        }
    }

  render() {
    return (

<input type="search" id="search" onKeyDown={event => this.clickHandler(event)} />
    <h1>{this.state.title}</h1>

    )
  }
}

Answer 2

If you want to query the API after user push submit button. You should put your call to API in the call handler, then pass the state from App to MovieList as props

export class App extends React.Component {
    state = {
        title: ""
    }

    clickHandler() {
        const API_KEY = '***********************';
        const query = document.getElementById('search').value;
        axios.get(`https://api.themoviedb.org/3/search/movie?api_key=${API_KEY}&query=${query}`).then(res => {
            const title = res.data['results'][0]['title'];
            this.setState({ title });
        });
    }

    render() {
        return (
            <div>
                <input type="search" id="search" />
                <button onClick={(e)=>clickHandler()}>submit</button>
                <h1 id="title">title</h1>
                <Movielist list={this.state.title}/>
            </div>

        )
    }
}

export class MovieList extends React.Component {
    render() {
         <h1>{this.props.title}</h1>
    }
}

Alternatively, you can wrap the input in a element and use onSubmit + evt.preventDefault() instead, by doing so you can handle button click and pressing "Enter" to submit.

Answer 3

You should call API to get the movie list after hitting the button, then pass the data that you've got to Movielist . Try this:
In App.js :

 import React from "react" import axios from 'axios' import Movielist from './components/Movielist' function App() { const [movieList, setMovieList] = React.useState([]) const handleOnSubmit = () => { const API_KEY = '***********************'; const query = document.getElementById('search').value; axios.get(`https://api.themoviedb.org/3/search/movie?api_key=${API_KEY}&query=${query}`).then(res => { const title = res.data['results'][0]['title']; setMovieList(res.data['results']) }) } return ( <div> <input type="search" id="search" /> <button onClick={handleOnSubmit}>submit</button> <h1 id="title">title</h1> <Movielist movieList={movieList}/> </div> ) } export default App

In Movielist.js :

 import React from 'react'; const Movielist = ({movieList}) => { return ( <div> { movieList.map(movie => <h1 key={movie.key}>{movie.title}</h1>) } <div/> ) } } export default Movielist

Answer 4

import React, {useState} from "react"
import axios from 'axios';
import Movielist from './components/Movielist'

const [title, setTitle] = useState("")
const API_KEY = '***********************'

function App() {

  const clickHandler = () => {
    const query = document.getElementById('search').value;
    axios.get(`https://api.themoviedb.org/3/search/movie?api_key=${API_KEY}&query=${query}`)
    .then(res => {
      const title = res.data['results'][0]['title'];
      setTitle(title);
    })

 }

    return (
        <div>
            <input type="search" id="search" />
            <button onClick={clickHandler}>submit</button>
            <h1 id="title">title</h1>
            <Movielist title={title} />
        </div>

    )
}

export default App

just move call api handle to your onclik func then pass title props to movie list