Блог

Главная - Вопросы по программированию - Реагировать js: Передача данных API дочернему компоненту в реквизитах. Может использовать реквизиты console.log, но не может отображать данные

Реагировать js: Передача данных API дочернему компоненту в реквизитах. Может использовать реквизиты console.log, но не может отображать данные

#reactjs #api

Вопрос:

Я пытался познакомиться с React. У меня есть два компонента. Вызов API выполняется для родительского компонента, и я пытаюсь передать данные дочернему компоненту.

Это мой родительский компонент:

 
export default function LandingPage(props) {
  const [posts, setPosts] = useState([]);
  useEffect(() => {
    axios.get("https://jsonplaceholder.typicode.com/posts").then((response) => {
      setPosts(response.data);
    });
  }, []);

  const classes = useStyles();
  const { ...rest } = props;
  return (
    <div>

      <div className={classNames(classes.main, classes.mainRaised)}>
        <div className={classes.container}>

          {/* HERE IS THE CHILD COMPONENT BELOW */}
          <ProductSection posts={posts} /> 

        </div>
      </div>
      <Footer />
    </div>
  );
}

Это мой детский компонент:

 
export default function ProductSection(props) {
  const classes = useStyles();

  return (
    <div className={classes.section}>
      {/* HERE IS THE CONSOLE LOG */}
      {console.log(props.posts[0])}
      {/* HERE IS THE RENDER  */}
      <Typography>{props.posts[0]}</Typography>
   </div>

  );
}

ProductSection.propTypes = {
  posts: PropTypes.arrayOf(
    PropTypes.shape({
      userId: PropTypes.number,
      id: PropTypes.number,
      title: PropTypes.string,
      body: PropTypes.string,
    })
  ),
};

Заранее спасибо, вроде как новичок в этом деле.

Ответ №1:

Данные являются объектами, было бы более понятно, если бы компонент типографии был общим. Хотя я пытался решить эту проблему без типографии и ее работы после добавления условных для несуществующих postData, так как данные будут извлечены и будут ждать обещания служить. Это работает.

App.js -> Родитель

ProductSection.js -> Ребенок

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

Ссылка

Комментарии:

1. Спасибо, что теперь у меня есть дисплей, мне было интересно, не могли бы вы, возможно, объяснить немного больше о том, что здесь происходит, я все еще пытаюсь понять это. спасибо вам

2. 2. При выполнении сетевого запроса возникает задержка , т. е. загрузка данных займет некоторое время. Таким образом, react будет отображаться изначально, и он будет ожидать чего-то в своем состоянии. Просто представьте себе концепцию загрузки. Должно быть какое-то состояние загрузки. Поэтому мы установили postData на что-то ложное. Так что мы можем добавить условные и дождаться данных. Когда поступают данные, мы устанавливаем состояние и запоминаем всякий раз, когда мы устанавливаем состояние. React перенаправляет, поэтому он будет заполнять данные сейчас, прежде чем этого не произойдет, потому что его ( сетевой запрос получает axios), который имеет задержку, и изначально react чего-то ожидает.

3. freecodecamp.org/news/fetch-data-react/. … Обратитесь к этому для большей ясности , очень хорошо объясненной здесь

4. 1. React не может визуализировать объект. Это не может быть неявно, но явно, преобразовав его с помощью строки, мы можем. Но зачем визуализировать объект. Мы определенно хотели бы показать его ключи, такие как идентификатор, название или тело. Так, например, дочерний компонент получил объект, который был в вашем коде : props.posts[0]. Таким образом, мы получим доступ к его ключам, потому что react может неявно отображать строку или число . Поэтому мы получаем доступ к его ключам. Итак, проблема рендеринга объекта решена.

Ответ №2:

Я предполагаю, что,вероятно,ваши данные в props.posts[0] являются объектом, поэтому я бы попробовал использовать JSON.stringify(props.posts[0], null, 2).

Метки: ,