更新狀態后，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>
  );
};

現場演示