Компоненты

const Pcards = ({ projects }) => {
     return (
         <div>
             <CardColumns>
                 {projects.map((projects) => (
                    <Card>
                       <Card.Img variant="top" src={"http://localhost:8000" + projects.images[0].file_path + projects.images[0].file_name + projects.images[0].file_type} />

Страницы

class Projects extends Component {

    state = {
        projects:[]
    }

    componentDidMount() {
      fetch('http://localhost:5000/api/projects')
       .then(res => res.json())
       .then((data) => {
         this.setState({ projects: data })
       })
       .catch(console.log)
    }

    render () {
      return (
         <Pcards projects = {this.state.projects} />
      );
    }
}

Новый реагировать и этот код возвращается

Ошибка типа: projects.map не является функцией

Похоже, это хорошо компилируется со стороны моего партнера, так как он написал этот код, и я пытаюсь расширить его работу.

Я видел другие подобные сообщения, но не смог найти решение. Есть идеи, что здесь происходит?

0
csodesza 2 Май 2020 в 05:12

2 ответа

В вашем классе Projects есть две ошибки. 1-. Синтаксис обработки ошибок .catch был неверным 2- вы не проверяли извлеченные данные


class Projects extends Component {
  state = {
    projects: []
  }
  componentDidMount() {
    fetch('http://localhost:5000/api/projects')
      .then(res => res.json())
      .then((data) => {
        if (data && data.length) {    // checking the data
          this.setState({ projects: data })
        } else {
          console.log("Projects fetch failed, check your api code!")
        }
      })
      .catch(e => console.log(e));   // corrected error catch
  }

  render() {
    return (
      <Pcards projects={this.state.projects} />
    );
  }
}

Вы также можете редактировать свой код компонента Pcards. Вы уже используете свойство projects и отображаете его, также вызывая аргумент projects. Это не очень хорошая практика. Если вы отображаете projects, назовите элемент как project или projectItem.

projects.map((project) => ...

0
Ci Boz 2 Май 2020 в 12:26

Пытаться

class Projects extends Component {
    constructor(props){
        super(props)
        this.state = {
            projects:[]
        }
    }

0
Nilanka Manoj 2 Май 2020 в 02:31