javascript - 如何防止 TypeError:提交空表单数据时无法读取未定义的属性“地图”?
问题描述
好的,所以我的代码运行良好,但是当我在输入字段为空时点击提交时,我的 .map 方法没有输入值添加到要搜索的 API 字符串的末尾,所以我得到一个 typeError: cannot read property of map undefined . 因为输入是我的状态,如果我没有在输入字段中输入字符串,则状态不会更新,因此 .map 方法没有更新的状态可以关闭。那么如何将输入字段设置为要求在提交按钮甚至调用函数“SearchApi”之前输入文本?
我试图设置条件,但它似乎没有工作......就像......如果 input.length < 1 { setInput("ET") 只是为了它有一些东西要搜索并且不返回错误。我也在网上查看反应表单验证教程,但我觉得也许我做错了。任何帮助将不胜感激,谢谢!
import React, {useState, useEffect} from 'react';
const SearchBar = () => {
const [search, setSearch] = useState([]);
const [input, setInput] = useState('');
const [trending, setTrending] = useState([]);
const [upcoming, setUpcoming] = useState([]);
// Input Field
const onUserInput = ({target}) => {
setInput(target.value);
}
// Api Call
const SearchApi = (event) => {
const aUrl = "https://api.themoviedb.org/3/search/movie?api_key=fde5ddeba3b7dec3fc1f51852ca0fb95";
const newUrl = aUrl +'&query=' + input;
event.preventDefault();
fetch(newUrl)
.then((response) => response.json())
.then((data) => {
setSearch(data.results);
})
.catch((error) => {
console.log('Error!! Data interupted!:', error)
})
}
return (
// Heading
<div>
<div className="container">
<h1>Movie Search Extravaganza!</h1>
{/* Input Field and Button Form */}
<form>
<input value={input} onChange={onUserInput} type="text" className="searchbar" aria-label="searchbar" placeholder="search" name="movie" required/>
<br></br>
<button type="submit" onClick={SearchApi} aria-label="searchbutton" className="searchBtn">Movie Express Search</button>
</form>
</div>
<div className="byName-container">
<h1 className="row-label" tabIndex="0">Movies Related To Your Search</h1>
<ul className="flexed-search">
{search.map((item) =>
<div className="poster-container">
<li className="list-item" key={item.id}>
<img className="image-element" tabIndex="0" alt="movie poster" aria-label={item.title} src={`https://image.tmdb.org/t/p/w500${item.poster_path}`} />
<h3 className="posterTitle">{item.title}</h3>
</li>
</div>
)}
</ul>
</div>
<div className="trending-container">
<h1 className="row-label" tabIndex="0">This Weeks Trending Tittles</h1>
<ul className="flexed-trending">
{trending.map((it) =>
<div className="poster-container">
<li className="list-item" key={it.id}> <img className="image-element" tabIndex="0" aria-label={it.title} alt="movie poster" src={`https://image.tmdb.org/t/p/w500${it.poster_path}`} />
<h3 className="posterTitle">{it.title}</h3>
</li>
</div>
)}
</ul>
</div>
<div className="upcoming-container">
<h1 className="row-label" tabIndex="0">Upcomming Movies</h1>
<ul className="flexed-upcoming">
{upcoming.map((inn) =>
<div className="poster-container">
<li className="list-item" key={inn.id}>
<img className="image-element" tabIndex="0" alt="movie poster" aria-label={inn.title} title={`${inn.title}: ==> ${inn.overview}`} src={`https://image.tmdb.org/t/p/w500${inn.poster_path}`} />
<h3 className="posterTitle">{inn.title}</h3>
</li>
</div>
)}
</ul>
</div>
</div>
)
};
export default SearchBar;```
解决方案
你在表格中犯了一个小错误
改变这个:
<form>
...
<button type="submit" onClick={SearchApi} aria-label="searchbutton" className="searchBtn">
Movie Express Search
</button>
</form>
经过 :
<form onSubmit={SearchApi}>
...
<button type="submit" aria-label="searchbutton" className="searchBtn">
Movie Express Search
</button>
</form>
输入的“必需”将起作用。演示: Stackblitz
PS:检查所有地图功能中的键
{search.map(item => (
<div className="poster-container"> //pass the key here and do the same for others
<li className="list-item" key={item.id}>
推荐阅读
- c - 计算和打印矩阵的对角线之和
- javascript - 如何在 Angular 中使用 addEventListener 和 postMessage?
- php - 如何将日期、时间和值从单选按钮放入数据库
- c# - 逐个像素地动态绘制和显示,有一些延迟
- npm - 如何从 Nexus oss 代理获取依赖于 github 项目的 npm 包
- django - Django 测试 - 发送包含整数的数组数组
- android - 在 android 中使用改造登录
- json - 我如何在 nunjuncks 中乘以数据?
- swift - 为什么不能在swift中将可变参数标记为inout?
- vue.js - Vue Js 2 / Vue-CLI 3 / 托管时显示空白页