Блог

Я новичок в том, чтобы реагировать. Я пытаюсь обновить родительское состояние из дочернего, но у меня ошибка в другом компоненте на том же уровне, что и у дочернего.

это мой кодекс.

RedirectPage.js (родитель)

 const RedirectPage = (props) =gt; {   const [status, setStatus] = useState("Loading");  const [weather, setWeather] = useState(null);  const [location, setLocation] = useState(null)  const [showLoader, setShowLoader] = useState(true)  const [userId, setUserId] = useState(false)  const [isPlaylistCreated, setIsPlaylistCreated] = useState(false)    const headers = getParamValues(props.location.hash)   const getWeather = () =gt;{  //fetch data..  //...  //...  .then(response =gt; {  var res = response.json();  return res;   })  .then(result =gt; {  setWeather(result)  setShowLoader(false)  setStatus(null)  setLocation(result.name)  });  })  }   const changeStateFromChild = (value) =gt; {  setIsPlaylistCreated(value)  }   useEffect(() =gt; {  getWeather()  },[]);   return (  lt;div className="containerRedirectPage"gt;  {showLoader ? (  lt;div className="wrapperLogo"gt;  lt;img src={loader}className="" alt="logo" /gt;  lt;/divgt;)  : (  lt;div className="wrapperColonne"gt;  lt;div className="firstRow"gt;  lt;WeatherCard weatherConditions={weather}/gt;  lt;/divgt;  {isPlaylistCreated ? (  lt;div className="secondRow"gt;  lt;PlaylistCard /gt;  lt;/divgt;  ) : (  lt;PlaylistButton userId={userId} headers={headers} weatherInfo={weather} playlistCreated={changeStateFromChild} /gt;  )}    lt;/divgt;  )}  lt;/divgt;  ) }; export default RedirectPage;  

PlaylistButton.js:

 export default function PlaylistButton({userId, headers, weatherInfo, playlistCreated}) {   const buttonClicked = async () =gt; {   // ...some code...   playlistCreated(true)    }   return (  lt;div className="button-container-1"gt;  lt;span className="mas"gt;CREA PLAYLISTlt;/spangt;  lt;button onClick={buttonClicked} id='work' type="button" name="Hover"gt;CREA PLAYLISTlt;/buttongt;  lt;/divgt;  ) }  

и это еще один компонент, из-за которого я получаю ошибку, когда нажимаю на кнопку.

WeatherCard.js:

 const WeatherCard = ({weatherConditions}) =gt; {   const [weather, setWeather] = useState(null);    const [icon, setIcon] = useState(null);   const getTheIcon = () =gt; { // code to get the right icon  }  setIcon(x)  }   useEffect(() =gt; {  getTheIcon()  },[]);   return (  lt;div className="weatherCard"gt;  lt;div className="headerCard"gt;  lt;h2gt;{weatherConditions.name}lt;/h2gt;  lt;h3gt;{Math.floor(weatherConditions.main.temp)}°Clt;/h3gt;  lt;/divgt;  lt;div className="bodyCard"gt;  lt;h5gt;{weatherConditions.weather[0].description}lt;/h5gt;  lt;img className="weatherIcon" src={icon} alt="aa" /gt;  lt;/divgt;  lt;/divgt;  ) }; export default WeatherCard;  

в первый раз, когда я загружаю страницу перенаправления, компонент WeatherCard работает правильно. Когда я нажимаю кнопку, я получаю эту ошибку: ошибка

Может кто-нибудь объяснить мне, почему ?

Каков эффект от настройки playlistCreated(true) ? Влияет ли это на объект погодных условий ? Если в какой-то момент погодные условия могут быть неопределенными, вам необходимо проверить их, прежде чем использовать их свойства (имя, main.temp и погода).

Обновление: В ошибке четко указано, что она не может прочитать имя из weather, потому что оно не определено. Вы должны проверить это перед использованием свойств объекта погоды.

 if (!weatherConditions) {  return lt;divgt;Loading...lt;/divgt; // or something appropriate.  }  return (  lt;div className="weatherCard"gt;  lt;div className="headerCard"gt;  lt;h2gt;{weatherConditions.name}lt;/h2gt;  {weatherConditions.main amp;amp; lt;h3gt;{Math.floor(weatherConditions.main.temp)}°Clt;/h3gt;}  lt;/divgt;  lt;div className="bodyCard"gt;  {weatherConditions.weather amp;amp;   {weatherConditions.weather.length gt; 0 amp;amp;  lt;h5gt;{weatherConditions.weather[0].description}lt;/h5gt;}  ....  )