Блог

У меня возникли проблемы с отображением на моем локальном хосте обоих моих состояний (у меня есть следующее сообщение: TypeError: не удается прочитать свойство ‘map’ неопределенного).

Skills.js

 import React, { Component } from 'react';
import ProgressBar from './ProgressBar';

class Skills extends Component {
  state = {
    programs: [
      { id: 1, value: 'Opera', xp: 5 },
      { id: 2, value: 'Fols', xp: 3 },
      { id: 3, value: 'Micros', xp: 2 },
    ],
    languages: [
      { id: 1, value: 'French', xp: 5 },
      { id: 2, value: 'English', xp: 5 },
      { id: 3, value: 'Spanish', xp: 1 },
    ]
  }

  render() {
    let { programs, languages } = this.state;

    return (
      <div className="programsLanguages">
        <ProgressBar
          programs={programs}
          className="programsDisplay"
          title="programs"
        />
        {/* <ProgressBar
          languages={languages}
          title="languages"
          className="languagesDisplay"
        /> */}
      </div>
    );
  }
}

export default Skills;
 

Для

ProgressBar.js

 import React from 'react';

const ProgressBar = (props) => {
  return (
    <div className={props.className}>
      <h3>{props.title}</h3>
      <div className="years">
        <span>Years of Experience</span>
        <span>1 year</span>
        <span>8 years</span>
      </div>

      <div>
        console.log(props)
        {props.programs.map((item) => {
          let xpYears = 8;
          let progressBar = (item.xp / xpYears) * 100   '%';
          return (
            <div key={item.id} className="programsList">
              <li>{item.value}</li>
              <div className="progressBar" style={{ width: progressBar }}></div>
            </div>
          );
        })}
      </div>
    </div>
  );
};

export default ProgressBar;
 

Когда я комментирую

 {/* <ProgressBar
          languages={languages}
          title="languages"
          className="languagesDisplay"
        /> */}
 

это работает. Мой локальный хост показывает мой объект {программы}, и то же самое, если я комментирую {программы} (отображаются мои {языки}), но вместе это невозможно.

Надеюсь, я был достаточно конкретен в своем примере.

Большое вам спасибо.

С уважением

Это потому, что вы использовались languages здесь в качестве реквизита

 <ProgressBar
  languages={languages}
  title="languages"
  className="languagesDisplay"
/>;
 

но вы отображаете programs здесь:

 {props.programs.map((item) => {
  let xpYears = 8;
  let progressBar = (item.xp / xpYears) * 100   '%';
  return (
    <div key={item.id} className="programsList">
      <li>{item.value}</li>
      <div className="progressBar" style={{ width: progressBar }}></div>
    </div>
  );
})}
 

также попробуйте проверить props.programs перед отображением, чтобы иметь такую длину:

 {props.programs.length amp;amp; props.programs.map((item) => {
  let xpYears = 8;
  let progressBar = (item.xp / xpYears) * 100   '%';
  return (
    <div key={item.id} className="programsList">
      <li>{item.value}</li>
      <div className="progressBar" style={{ width: progressBar }}></div>
    </div>
  );
})}
 

Используйте Реагирующий Крючок

И передайте тот же реквизит таким образом items={прогресс} ИЛИ items= {языки} Например, реквизиты title и calssName

 import React, { useState } from 'react';

const ProgressBar = ({ title, items, className }) => {
  return (
    <div className={className}>
      <h3>{title}</h3>
      <div className="years">
        <span>Years of Experience</span>
        <span>1 year</span>
        <span>8 years</span>
      </div>
      <div>
       console.log(props)
        {items.map((item) => {
          let xpYears = 8;
          let progressBar = (item.xp / xpYears) * 100   '%';
          return (
            <div
              key={item.id}
              className="programsList"
            >
              <li>{item.value}</li>
              <div
                className="progressBar"
                style={{ width: progressBar }}
              ></div>
            </div>
          );
        })}
      </div>
    </div>
  );
};

const initialPrograms = [
    { id: 1, value: 'Opera', xp: 5 },
    { id: 2, value: 'Fols', xp: 3 },
    { id: 3, value: 'Micros', xp: 2 },
  ],
  initialLanguages = [
    { id: 1, value: 'French', xp: 5 },
    { id: 2, value: 'English', xp: 5 },
    { id: 3, value: 'Spanish', xp: 1 },
  ];

const Skills = () => {
  const [programs, setPrograms] = useState(initialPrograms);
  const [languages, setLanguage] = useState(initialLanguages);
  return (
    <div className="programsLanguages">
      <ProgressBar
        items={programs}
        className="programsDisplay"
        title="programs"
      />
      <ProgressBar
        items={languages}
        title="languages"
        className="languagesDisplay"
      />
    </div>
  );
};

export default Skills;