如何使用 Axios 在 React 中實現 onClick componentDidMount()

Question

我正在嘗試使用 React、Axios 和 movieDB API 進行電影搜索 function。 我現在嘗試實現的功能是在搜索欄中輸入電影，然后單擊提交按鈕會將電影標題作為 H1 元素返回。

我的 onClick function 不起作用： <button onClick={(e)=>clickHandler()}>submit</button>

componentDidMount() 僅在頁面刷新時起作用，並且由於提交按鈕損壞，您無法搜索任何內容。

我不確定如何實現這一點，但我也不介意是否可以通過按 Enter 鍵而不是使用按鈕來搜索它，以更容易者為准。

到目前為止，這是我的代碼。

應用程序.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

電影列表.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

如果您想在用戶按下提交按鈕后查詢 API。 您應該在調用處理程序中調用 API，然后將 state 作為道具從 App 傳遞給 MovieList

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

或者，您可以將輸入包裝在一個元素中並使用 onSubmit + evt.preventDefault() 代替，這樣做您可以處理按鈕單擊並按“Enter”提交。

Answer 3

點擊按鈕后，您應該調用 API 來獲取電影列表，然后將您獲得的數據傳遞給Movielist 。 嘗試這個：
在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

在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

只需將調用 api 句柄移動到您的 onclik func 然后將標題道具傳遞給電影列表