我有一个原始的React程序,它使用Axios获取有关电影的数据,然后为用户打印。Axios的请求,以及因此打印的信息,不应该发生,直到用户点击底部的按钮。
import "./styles.css";
import axios from "axios";
import { useState } from "react";
export default function App() {
const [movie, setMovie] = useState("");
const [title, setTitle] = useState("");
const [runTime, setRunTime] = useState("");
function getMovie(e) {
setMovie(e.target.value);
}
console.log(movie);
function axiosRequest() {
return axios.get(
"https://www.omdbapi.com/?t=" + movie + "&y=&plot=short&apikey=trilogy"
);
}
axiosRequest().then(function (results) {
var response = results.request.response;
var responseObj = JSON.parse(response);
console.log(responseObj);
setTitle(responseObj.Title);
setRunTime(responseObj.Runtime);
});
return (
<div>
<h1 style={{ "text-align": "center" }}>
[INSERT CATCH NAME FOR MOVIE SEARCH ENGINGE HERE]
</h1>
<p>Hello, what movie would you like to know about:</p>
<input type="text" onChange={getMovie} />
<br />
<br />
<button onClick={axiosRequest}>submit</button>
<br />
<br />
Title: {title}
<br />
Runtime: {runTime}
</div>
);
}
字符串
我尝试过将事件处理程序编写为{axiosRequest}
、{() => axiosRequest}
、{() => axiosRequest()}
甚至{() => axiosRequest(params)}
,但都不起作用。还是有同样的问题。我甚至尝试将.then
附加到axiosRequest函数的定义中,但React不喜欢这样。它也不喜欢我删除括号并将其写为axiosRequest.then
,我认为这可能会阻止函数在每次渲染时触发。
那是怎么回事我该如何解决此问题?我不希望它在用户点击按钮之前开始打印电影数据。
1条答案
按热度按时间swvgeqrz1#
将执行获取和处理数据的代码移到单独的函数中。目前,该代码直接位于组件内部,并将在每个渲染器上执行。
个字符