reactjs - React Hooks：无法读取未定义的属性“地图”

Question

通过将voila与foreach一起使用，我认为状态已被操纵...
所以请帮助我找出实际问题是什么...就像我尝试使用在循环内不起作用的循环并且知道我尝试过使用foreach和它告诉地图是未定义的，可能是因为状态被操纵了......此外，请在useeffect中看到console.log，它给了我想要的东西。但是使用相同的逻辑我无法在页面中呈现它。

      export default function App() {
      const [selectedUserName, setSelectedUserName] = React.useState("");
      const [tvShow, setTvShow] = React.useState(thestack);
      const [selectedTVShow, setSelectedTVShow] = React.useState("");
      useEffect(() => {
        if (selectedUserName !== "") {
          setTvShow(() =>
            thestack.filter((show) => show.username === selectedUserName)
          );
        }
      }, [selectedUserName]);
      useEffect(() => {
          if (selectedTVShow !== "") {
          let voila = [10]
          // for(let i=0;i<10;i++){ 
          setTvShow(
             voila.forEach(function (number) {thestack.filter((showme=[number]) => {return showme.sitcoms[number] === selectedTVShow})  })                 
            // thestack.filter((showme) => showme.sitcoms[2] === selectedTVShow)
            );
              // }
          }
        for(let i=0;i<10;i++){console.log(thestack.filter((showme = [i]) => {return showme.sitcoms[i] === selectedTVShow}));}
        
      }, [selectedTVShow]);
      let summedArray = thestack[1].sitcoms.concat(
        thestack[2].sitcoms,
        thestack[3].sitcoms,
        thestack[4].sitcoms,
        thestack[5].sitcoms
      );
      //console.log(summedArray)
      let newsummedArray = [...new Set(summedArray)];
      //console.log(newsummedArray);
      // console.log(thestack[3].sitcoms[3]);
      let vola = newsummedArray.map((element) => {
        return element;
      });
      //console.log(vola)
      return (
        <div>
          <select
            placeholder="Sitcoms"
            onChange={(event) => setSelectedUserName(event.target.value) }
            
          >
            <option value="nothing">Select the username</option>
            <option value="priyansh__8">priyansh__8</option>
            <option value="shekhar_mandal_">shekhar_mandal_</option>
            <option value="h28h8_00">h28h8_00</option>
            <option value="iamneegam">iamneegam</option>
          </select>
          <span> </span>
          <button className="reloadButton" onClick={() => setTvShow(thestack)}>
            Reload
          </button>
          <select
            placeholder="TVShow"
            onChange={(event) => setSelectedTVShow(event.target.value)}
            className="TVdropdown"
          >
            <option>Choose any TV-Show</option>
            <option>{newsummedArray[0]}</option>  <option>{newsummedArray[1]}</option>  <option>{newsummedArray[2]}</option>  
          <option>{newsummedArray[3]}</option>  <option>{newsummedArray[4]}</option>  <option>{newsummedArray[5]}</option>  
          <option>{newsummedArray[6]}</option>  <option>{newsummedArray[7]}</option>  <option>{newsummedArray[8]}</option>  
          <option>{newsummedArray[9]}</option>  <option>{newsummedArray[10]}</option>  <option>{newsummedArray[11]}</option>  
          <option>{newsummedArray[12]}</option>  <option>{newsummedArray[13]}</option>  <option>{newsummedArray[14]}</option>  
          <option>{newsummedArray[15]}</option>  <option>{newsummedArray[16]}</option>  
          </select>
    
          <div className="App">
            {tvShow.map((item) => (
              <Square
                key={item.id}
                icon_six={item.icon[5]}
                username={item.username}
                username_link={item.username_link}
                icon_one={item.icon[0]}
                sitcoms_one={item.sitcoms[0]}
                icon_two={item.icon[1]}
                sitcoms_two={item.sitcoms[1]}
                icon_three={item.icon[2]}
                sitcoms_three={item.sitcoms[2]}
                icon_four={item.icon[3]}
                sitcoms_four={item.sitcoms[3]}
                icon_five={item.icon[4]}
                sitcoms_five={item.sitcoms[4]}
              />
            ))}
          </div>
        </div>
      );
    }

标签： reactjsmultidimensional-arrayreact-hooksuse-effectweb-frontend