如何防止 TypeError：提交空表单数据时无法读取未定义的属性“地图”？

Question

好的，所以我的代码运行良好，但是当我在输入字段为空时点击提交时，my.map 方法没有输入值添加到 API 字符串的末尾以进行搜索，所以我得到一个 typeError: cannot read property of Z1D78DC8ED51214E5AEFEZ . because input is my state and if I dont enter a string into the input field the state doesnt get updated so the.map method has no updated state to go off of. 那么如何将输入字段设置为要求在提交按钮之前输入文本甚至调用 function “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;```

Answer 1

你在表格中犯了一个小错误

改变这个：

<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：检查所有 map 功能中的键

  {search.map(item => (
    <div className="poster-container">     //pass the key here and do the same for others
      <li className="list-item" key={item.id}>

Answer 2

你可以尝试明确要求

required={true}