为什么我无法 map 我在 React 项目中的数据？

Question

Ill be changing the key shortly. Using the code below I should be able to load a list of movies from the API and each movie should be linked to it's Provider Link website. using the upMovieDetail. can anyone help point me in the right direction? I have a feeling it has something to do with the component being re-renderd after the click?

here is the codesandbox if you'd rather try to fix it here.. -- https://codesandbox.io/s/movieapp-searchbar-forked-qv1o6

const key ="fde5ddeba3b7dec3fc1f51852ca0fb95";

const getUpMovieDetail = (movieId) => {
     //const [movieId, setMovieId] = useState([]);

    const url = `https://api.themoviedb.org/3/movie/${movieId}/watch/providers?api_key=${key}`;
        return fetch(url);
      };
      
      function UpMovieDetail({ movieItem }) {
        const [searchLink, setSearchLink] = useState(null);
      
        useEffect(() => {
          getUpMovieDetail(movieItem.id)
            .then((res) => res.json())
            .then((res) => {
              setSearchLink(res?.results?.US?.link);
            });
        }, [movieItem.id]);

        return (
            <ul className="flexed-search">
    {searchLink.map((item) => 
    <div className="poster-container" key={item.id}>
    <li className="list-item">
        <a target="_blank" rel="noopener noreferrer" href={searchLink}
        onclick={((event) => {event.preventDefault()})}>
     <img className="image-element"  tabIndex="0" alt="movie poster" 
     title={`--Title: ${item.title}--  --Description:    
     ${item.overview}--  --Vote Average: ${item.vote_average}`} 
     aria-label={item.title} 
     src={`https://image.tmdb.org/t/p/w500${item.poster_path}`} />
     </a>
    <h3 className="posterTitle">{item.title}</h3>
    </li>
    </div>
 )}
</ul>
          );
        }; 


const SearchBar = () => {

const [search, setSearch] = useState([]);
const [input, setInput] = 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 onSubmit={SearchApi}>
        <input value={input} onChange={onUserInput} type="text"  className="searchbar" aria-label="searchbar" placeholder="search" required/>
        <br></br>
        <button type="submit"  aria-label="searchbutton" className="searchBtn">Movie Express Search</button>
      </form>
      <h1 className="row-label" tabIndex="0">Movies Related To Your Search</h1>
     </div>

 <div className="byName-container">
  {search.map((item) => (
    <UpMovieDetail key={item.id} movieItem={item} />
  ))}
</div>
 
 </div>
      )};

export default SearchBar;```


  [1]: http://codesandbox.io/s/movieapp-searchbar-forked-qv1o6
  [2]: https://codesandbox.io/s/movieapp-searchbar-forked-qv1o6

Answer 1

From the first render it throws the error because searchLink is null . Try this:

{
  searchLink && searchLink.length && searchLink.map((item) =>
  ...
}