更新状态后反应组件不重新渲染答案

【问题标题】：react component does not rerender after update state更新状态后反应组件不重新渲染
【发布时间】：2021-01-27 18:33:43
【问题描述】：

我有这个反应功能组件，我有文件输入。在我选择文件后，我假设 h1 标签中的文本应该从 choose file 到 test 但什么也没发生

handleChange 函数被触发
console.log 打印 state.show : true
INSIDE console.log() 打印 state.show : true 但不显示字符串 test

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

【问题讨论】：

你可以尝试重命名 state / setState 吗？我不认为这会导致问题，但以防万一遗留方法和 Hook 使用之间存在一些奇怪的交互。

标签： javascript reactjs

【解决方案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>
  );
};

Live Demo

【讨论】：

即使您从状态中删除 {show:false} 的初始值，该演示仍然有效。但仍然没有解决我的问题
这不是必须的； undefined 应该在三元中解析为 false。