如何实现 API 搜索 onClick

Question

我的项目正在使用 React、Axios 和 movieDB 的 API。我正在尝试这样做，以便当我输入电影标题并按 Enter 和/或单击提交时，API 将返回搜索的电影标题作为 h1 元素。

目前，只要我刷新浏览器，代码就会工作，它正常运行的唯一方法是，如果我进入代码并将${query} 替换为我想要搜索的内容，即joker。我尝试将 onclick 添加到按钮：<button onclick="componentDidMount()">submit</button>。然而，这并没有做任何事情。

App.js

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



function App() {
    return (
        <div>
            <input type="search" />
            <button onclick="componentDidMount()">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');
    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

你这里有一些问题：

• 您的应用程序的结构不是很好，例如。分离您的 API 调用
• 您正在调用生命周期方法，这些方法会自动调用
• 不要在 React 中使用像 getElementById 这样的 DOM 选择器
• 使用驼峰事件监听器（onclick 应该是 onClick）
• 对事件监听器使用回调，否则它们会立即触发
• 您在 stackoverflow 中包含了您的 API 密钥，大错特错！

试试这个： https://codepen.io/alexplummer/pen/YzwyJOW

import React, {useState} from "react";

const MovielistSearch = props => (
    <>
        <input type="search" onChange={e => props.saveSearchInput(e.target.value)} />
        <button type="button" onClick={() => props.handleSearch()}>
            Search
        </button>
    </>
);

const getMovies = props => {
  return ['Title 1', 'Title 2', 'Title 3'];
  // ADD REAL API HERE
  // const API_KEY = '';
  // const getMovies = await axios.get(`https://api.themoviedb.org/3/search/movie?api_key=${API_KEY}&query=${props.searchTerm}`);
  // return getMovies.data;
}

const MovieList = props => (
    <ul>
        {props.foundMovies.map(thisMovie=><li>{thisMovie}</li>)}
    </ul>
);

const App = () => {
  const [searchInput, setSearchInput] = useState("");
  const [foundMovies, setFoundMovies] = useState([]);

  const movieSearch = ()=> {
    if (searchInput == null) return;
    const foundMovies = getMovies(searchInput);
    setFoundMovies(foundMovies);
  }

  return (
    <div>
      <h1 id="title">Movie list</h1>
      <MovielistSearch saveSearchInput={setSearchInput} handleSearch={movieSearch} />
      <MovieList foundMovies={foundMovies} />
    </div>
  )
}

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

Answer 2

问题可能出在这里：

const query = document.getElementById('search');

它返回一个 HTML 元素。试试 document.getElementById('search').innerText