Блог

Мне нужно передать «notecards» (массив) из «Notecard.js » чтобы «LoadQuestions.js «. Журнал консоли показывает, что он передается, но когда я использую {notecards} в «return», он выдает ошибку как «неопределенный». Не могли бы вы взглянуть?

 Notecard.js (without the imports):

const useStyles = makeStyles((theme) => ({
  root: {
    maxWidth: 345,
  },
  media: {
    height: 0,
    paddingTop: '56.25%', // 16:9
  },
}));

export default function Notecard( {notecards} ) {
  const classes = useStyles();
  const next = () => {
    console.log('Next Button Clicked')
  };
  const previous = () => {
    console.log('Back Button Clicked')
  };
  const hint = () => {
    console.log('Hint Button Clicked')
  };
  console.log({notecards});

  return (
    <Card className={classes.root}>
      <div id="cardBody">
      <CardHeader
        title="Kate Trivia"
        // subheader="Hint: In the 20th century"
      />
      <CardContent>
        <LoadQuestions notecards={notecards}/>
      </CardContent>
      </div>
    </Card>
  );
}
 

 LoadQuestions.js (without imports)

const {useState} = React;

export default function LoadQuestions( {notecards} ) {
    const [currentIndex, setCounter] = useState(0);
    console.log({notecards});

    return (
    <div>
        <Toggle
            props={notecards}
            render={({ on, toggle }) => (
                <div onClick={toggle}>
                    {on ? 
                    <h1>{props.notecards} hi</h1> : 
                    <h1>{this.props[currentIndex].backSide}</h1>
                    }
                </div>
            )}
        />
        <button onClick={() => {
            console.log({notecards})
            if (currentIndex < (this.props.length-1)) {
                setCounter(currentIndex   1);
            } else {
                alert('no more cards')
            }
            }}>Next Card
        </button>
        <button onClick={() => {
            if (currentIndex > 0 ) {
                setCounter(currentIndex -1);
            } else {
                alert('no previous cards')
            }
            }}>Previous Card
        </button>
    </div>
    );
}
 

Заранее спасибо!

Это все детали, которые у меня есть для вас, но stack overflow действительно хочет, чтобы я добавил больше, прежде чем он отправит. Извините!

Вы должны проверить, существует ли props, при первом рендеринге компонента у него нет реквизитов, поэтому он показывает undefined.

Сначала я должен сказать, что вы уничтожили notecards , поэтому нет необходимости использовать props.

Если вы хотите использовать props, вам следует изменить

({notecards}) Для (props)

а если нет, вы можете напрямую использовать notecards , поскольку он разрушен

Я предлагаю вам два способа

добавление вопросительного знака для проверки, существует ли

  <h1>{props?.notecards} hi</h1>//in the case you want to use props
 

или

добавьте реквизиты в оператор if

  <h1>{props.notecards?props.notecards:''} hi</h1> // if notecards is destructured remove the "props."