Блог

Главная - Вопросы по программированию - компонент react не выполняет повторный запуск после состояния обновления

компонент react не выполняет повторный запуск после состояния обновления

#javascript #reactjs

#javascript #reactjs

Вопрос:

У меня есть этот функциональный компонент react, в котором у меня есть файловый ввод. после выбора файла я предполагаю, что текст в теге h1 должен быть преобразован из choose file в test , но ничего не происходит

  • запускается функция handleChange
  • состояние печати console.log.показать: true
  • состояние печати ВНУТРИ console.log().показать: true, но не показывает строковый тест
 import React, { useState } from 'react';

export default ({ selectedFile }) => {
  const [state, setState] = useState({});

  const handleChange = e => {
    console.log('in handleChange');
    setState({ ...state, show: true });
  };
  console.log('My state: ', state);
  return (
    <div className='file-uploader'>
      <input type='file' id='upload' hidden onChange={handleChange} />
      <label htmlFor='upload'>
        {state.show ? <h1> {console.log('INSIDE ', state)} test</h1> : <h1>choose file</h1>}
      </label>
    </div>
  );
};

Комментарии:

1. Можете ли вы попробовать переименовать state / setState? Я не думаю, что это вызовет проблемы, но на всякий случай существует какое-то странное взаимодействие между устаревшими методами и использованием перехвата.

Ответ №1:

{show: false} В исходном состоянии вам необходимо следующее свойство.

 import React, { useState } from 'react';

export default ({ selectedFile }) => {
  const [state, setState] = useState({show: false});

  const handleChange = e => {
    console.log('in handleChange');
    setState({ ...state, show: true });
  };
  console.log('My state: ', state);
  return (
    <div className='file-uploader'>
      <input type='file' id='upload' hidden onChange={handleChange} />
      <label htmlFor='upload'>
        {state.show ? <h1>test</h1> : <h1>choose file</h1>}
      </label>
    </div>
  );
};

Живая демонстрация

Комментарии:

1. демонстрация работает, даже если вы удалите начальное значение для {show:false} из состояния. но все равно не решает мою проблему

2. В этом не должно быть необходимости; undefined должно быть равно false в троичном.