Реакция: TypeError: невозможно прочитать свойство newCases из undefined. - PullRequest
Новая
       26

Реакция: TypeError: невозможно прочитать свойство newCases из undefined.

1 голос
/ 26 мая 2020

Я хочу понять, почему я получаю ошибку typeError Невозможно прочитать свойство newcases для undefined. Я создал новый компонент (Newcase. js) и основал его на существующем, который отлично работает. Но новый компонент всегда возвращает эту ошибку.

Индекс. js отправляет запрос на получение: 

 export const fetchNewCases = async () => {
  try {
    const {
      updates: { newcases},
    } = await axios.get("/api/newcases");
    return { newcases};
  } catch (error) {
    return error;
  }
};

в приложении. js Я вызываю функцию: 

state = {
    data: {},
    wilaya: "",
    updates: {},
  };


async componentDidMount() {
    const updates = await fetchNewCases();
    this.setState({ updates });
  }
    return (
          <Fragment>
            <div className="container">
              <NewCase updates={updates} />
           </div>
          </Fragment>
        );

Это Newcase. js компонент: 

const NewCase = ({ newcases}) => {
  return (
    <div className="modal-main">
      <section className="modal-main">New cases: {newcases}</section>
    </div>
  );
};

export default NewCase;

На стороне сервера я возвращаю фиктивные данные: 

const updates = {
  newcases: { value: 200 },
};

app.get("/api/newcases", (req, res) => {
   res.json(updates);
});

1 Ответ

0 голосов
/ 26 мая 2020
  1. Обычно ваш сервер / макет отправляет объект, который имеет свойство newcases, а вы пытаетесь деструктурировать свойство updates, которое неверно. Кроме того, ax ios предоставляет результат внутри data. Итак, сначала деструктурируйте data, затем выполните вложенную деструкцию newcases

Сделайте это 

export const fetchNewCases = async () => {
  try {
    const {data: {newcases} } = await axios.get("/api/newcases");
    return { newcases};
  } catch (error) {
    return error;
  }
};
В приложении js вы передаете updates в приложении js <NewCase updates={updates} /> и в Newcase.js вы получаете проп как newcases, что неверно

Сделайте это 

 const NewCase = ({ updates}) => { ...

Обновить (на основе комментария)

в приложении. js вы должны передать this.state.updates (не только обновления)

Приложение js

state = {
    data: {},
    wilaya: "",
    updates: {},
  };


async componentDidMount() {
    const updates = await fetchNewCases();
    this.setState({ updates });
  }
    return (
          <Fragment>
            <div className="container">
              <NewCase updates={this.state.updates} /> //<------ like this
           </div>
          </Fragment>
        );
...