更新状态后，react 组件不会重新渲染

Question

我有这个反应功能组件，我有文件输入。 在我选择文件后，我假设 h1 标签中的文本应该从choose file转换为test但没有任何反应

• handleChange 函数被触发
• console.log 打印 state.show : true
• INSIDE console.log() 打印 state.show : 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>
  );
};

Answer 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>
  );
};

现场演示