无法弄清楚为什么 React 代码不起作用答案

【问题标题】：Can't figure out why React code doesn't work无法弄清楚为什么 React 代码不起作用
【发布时间】：2020-06-19 02:07:23
【问题描述】：

我构建了一个自定义Input 组件，它只是HTML input 元素的包装器。这是关键代码，我已对其进行了简化，以便在此处发布：

// @flow

import React, { useState } from 'react';

type Props = {
  value?: string,
  onChange: Function
};

const Input = ((props: Props) => {
  const [ currentValue, setCurrentValue ] = useState(!!props.value ? props.value : '');

  const handleChange = (event: SyntheticInputEvent<EventTarget>) => {
    setCurrentValue(event.target.value);
    props.onChange(event);
  };

  return <input type='text'
                value={currentValue}
                onChange={handleChange} />;
});

我为此编写了一堆 React 测试库测试，它们都通过了。但是当我在一个网页中实现这个组件时，初始值并没有出现。我通过删除currentValue 代码并改用props.value 解决了这个问题。这样就解决了。但是我很好奇为什么上面的这种方法无法显示初始值。

【问题讨论】：

“初始值没有出现”是什么意思？我看到了。
使用我团队的应用程序，初始值永远不会出现。
为了将来参考，您使用 value 和 onChange 道具（如受控组件）以及使用状态（如不受控组件）有点奇怪。两种方法都可以，但通常它们不会一起使用。

标签： javascript reactjs react-hooks

【解决方案1】：

看看这个code，我确实用过prop-types

【讨论】：

非常有趣。我目前无法解释为什么它不适用于我团队的应用。