Блог

Я попытался получить доступ к WP REST для React. Метод выборки получает данные, которые я утешил, и проверяет. Когда я пытаюсь привязать данные к функции отображения интерфейса, выдается ошибка.

 import React,{ Component } from 'react';

class HomePage extends Component{
    constructor(props){
        super(props);
    

    this.state = {
        loading:true,
        Companies:[]
    }
    }
    async componentDidMount(){
    
        
        let data= fetch('https://example.co/wp-json/wp/v2/company?per_page=10').then((resp) =>{
        resp.json().then((res)=>{
        console.log(res);
        this.setState({Companies:res,loading:false})
        })
      })
    }

    render() {

    const Companies = this.state.Companies;
      return (
        <div>

        
        


          <section className="selected-firms-banner" style={{backgroundImage: 'url("https://example.co/wp-content/themes/demotheme/images/Hero-Banner.jpg")'}}>
            <div className="container">
              <div className="banner-content">
                <div className="row">
                  <div className="col-md-12 banner-title">
                    <h1> Firms Premised on Top to Bottom Scrutiny and Analysis</h1>
                  </div>
                  <div className="col-md-12 banner-description">
                    <p>Discover the top-notch Software Development firms over the globe. We investigate every possibility to give you a chance to find a portion of the eminent firms that will concur your needs and conveys superb administrations/surveillance.</p>
                    
                  </div>
                </div>
              </div>
            </div>
          </section>
          <section className="sf-post-listing">
            <div className="container">
              <div className="listing-post-main">
                <div className="row">             
    



        
        {Companies.map((company, i) => {
               return (<div className="col-md-6 col-lg-4 col-sm-12">
               <div className="listing-post-card effect-image-1 zoom-effect-1">
                 <img src="images/listing1.jpg" className="img-fluid" />
                 <div className="overlay simple-overlay"><i className="fa fa-link" aria-hidden="true" /></div>
               </div>
                  <h3>{company.title}</h3>
             </div> )
             })}
    
            
                </div>
              </div>
            </div>
          </section>
        </div>
      );
    }
  }

export default HomePage;
 

Полный компонент правильный, просто рендеринг части данных вызывает проблему.

Ошибка: объекты недопустимы как дочерние элементы React (найдено: объект с ключами {визуализируется}). Если вы хотели отобразить коллекцию дочерних элементов, вместо этого используйте массив.

Вам нужно подождать некоторое время до вызова API

Используйте async/await для этого

 async componentDidMount() {
    const response = await fetch("https://jsonplaceholder.typicode.com/todos");
    const data = await response.json();
    this.setState({ Companies: data, loading: false });
}
 

https://codesandbox.io/s/bold-bash-hpefh?file=/src/App.js