ฉันกำลังพยายามสร้างแถบค้นหาในการตอบสนองที่ค้นหาผ่าน TMDB API แต่ฉันมีปัญหาบางอย่าง เมื่อใดก็ตามที่ฉันพิมพ์ลงในแถบค้นหา ฉันได้รับข้อผิดพลาดแจ้งว่า 'ไม่สามารถอ่านคุณสมบัติของค่า null (อ่านค่า')' และฉันไม่แน่ใจว่าปัญหาคืออะไร และเหตุใดจึงกลับเป็นค่าว่าง ฉันเรียกการกล่าวถึงใน

 function Search() {
  const [searchQuery, setSearchQuery] = useState(""); 
  const [timeoutId, updateTimeoutId] = useState();

  const fetchData = async (searchString) => {
    const response = await axios.get(`https://api.themoviedb.org/3/search/movie?api_key=f134dfeac1ebb17feefa58d7f94e94cd&language=en-US&query=${searchString}&page=1&include_adult=false`);
    console.log(response);
  };

  const onTextChange = (e) => {
    clearTimeout(timeoutId);
    setSearchQuery(e.target.value);
    const timeout = setTimeout(() => fetchData(e.target.value), 500);
    updateTimeoutId(timeout);
  };

  return(
    <div> 
      <SearchBox>
      <SearchInput placeholder="SEARCH" value={searchQuery} onChange={onTextChange}></SearchInput>
      </SearchBox></div>
  );
}
ตอบ

คุณสามารถลอง ใช้การต่อ สายโซ่เสริม ( ?.)

function Search() {
  const [searchQuery, setSearchQuery] = useState(""); 
  const [timeoutId, updateTimeoutId] = useState();

  const fetchData = async (searchString) => {
    const response = await axios.get(`https://api.themoviedb.org/3/search/movie?api_key=f134dfeac1ebb17feefa58d7f94e94cd&language=en-US&query=${searchString}&page=1&include_adult=false`);
    console.log(response);
  };

  const onTextChange = (e) => {
    clearTimeout(timeoutId);
    setSearchQuery(e.target?.value);
    const timeout = setTimeout(() => fetchData(e.target?.value), 500);
    updateTimeoutId(timeout);
  };

  return(
    <div> 
      <SearchBox>
      <SearchInput placeholder="SEARCH" value={searchQuery} onChange={onTextChange}></SearchInput>
      </SearchBox></div>
  );
}