Реквизит передан, но я не могу получить к нему доступ

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

export default class UpcomingBar extends Component {
  constructor(props) {
    super(props);
    this.state = {
      uptasks: this.props.uptasks,
      uptaskdate: this.props.uptaskdate,

      taskentries: [],
    };

    this.combineTaskInfo = this.combineTaskInfo.bind(this);
  }

  combineTaskInfo() {
    const task = this.state.uptasks.map((task) => {
      return task;
    });
    const taskdate = this.props.uptaskdate;
    // const entry = if (task.id === taskdate.task_id) {
    //   this.setState({
    //     taskentries: [{
    //       task: task.task,
    //       lastcompleted: taskdate.lastcompleted,
    //       help: task.instructions,
    //     }].concat(this.state.taskentries),
    //   });
    // }
    console.info(
      "task",
      task,
      "task dates",
      taskdate,
      "task prop",
      this.state.uptasks,
      "taskdate props",
      this.state.uptaskdate
    );
  }

`> {
>   "uptasks": [
>     {
>       "id": 4,
>       "instructions": "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAArcAAAuECAIAAAAHicDwAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAP+lSURBVHhe7N15m1VVlif+dEAcAVERxAkQFOdZM9PMrKysrHxq7O7q7uo/+s3ky+gX0FU9VtVT/cvKyszKOZ1RFBEQlRkEQRFxFoff55zvieM14kZwYyBAXF/1eO4+a6+91tpr2jci7j3n888//0ahUCgUCoXCBJzb/b9QKBQKhULhy6guoVAoFAqFwnBUl1AoFAqFQmE4qksoFAqFQqEwHNUlFAqFQqFQGI7qEgqFQqFQKAxHdQmFQqFQKBSGo7qEQqFQKBQKw1FdQqFQKBQKheGoLqFQKBQKhcJwVJdQKBQKhUJhOKpLKBQKhUKhMBzVJRQKhUKhUBiO6hIKhUKhUCgMR3UJhUKhUCgUhqO6hE...",
>       "task": "pull strings from conveyor beaerings"
>     }
>   ],
>   "uptaskdate": [
>     {
>       "lastcompleted": "2024-04-30",
>       "nextdue": "2024-06-19",
>       "specs_sn": 101010,
>       "task_id": 4
>     }
>   ]
> }`

Я пробовал использовать this.props, я поместил их в состояние и попробовал this.state, основная цель — сопоставить их, но он не читает информацию о реквизитах.

reactjs

07.06.2024 19:04

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Навигация по приложениям React: Исчерпывающее руководство по React Router

React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...

Массив зависимостей в React

Все о массиве Dependency и его связи с useEffect.

Компонент против элемента в ReactJS - секрет оптимизации производительности за счет повторного использования элементов

Проще говоря, компонент - это фабрика для создания элементов.

Руководство по использованию хука useEffect для методов жизненного цикла React

Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

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

getOverTaskInfo() {
const odtaskid = this.state.overdue.map((record) => {
  return record.task_id;
});
const odtaskrec = odtaskid.forEach((record) => {
  axios.get(`http://127.0.0.1:5000/Task/${record}`).then((response) => {
    this.setState(
      {
        finaloverdue: [response.data].concat(this.state.finaloverdue),
      },
      () => {
        this.combineOverTaskInfo();
      }
    );
  });
});

}

Таким образом, он будет работать после того, как реквизит, который я искал, появится в состоянии, пригодном для использования функцией.

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

— 19.06.2024 15:17

10.06.2024 14:52