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

Question

我正在尝试使用 React、Axios 和 movieDB API 制作电影搜索功能。我现在尝试实现的功能是在搜索栏中输入电影，然后单击提交按钮会将电影标题作为 H1 元素返回。

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

componentDidMount() 仅在页面刷新时起作用，并且由于提交按钮损坏，您无法搜索任何内容。

我不确定如何实现这一点，但我也不介意是否可以通过按 Enter 键而不是使用按钮来搜索它，以更容易者为准。

这是我目前的代码。

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

点击按钮后，您应该调用 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 3

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 函数，然后将标题道具传递给电影列表

Answer 4

如果您想在用户按下提交按钮后查询 API。您应该在调用处理程序中调用 API，然后将状态从 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”提交。