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

Question

我构建了一个自定义Input组件，它只是HTMLinput元素的包装器。 以下是我简化在此处发布的关键代码：

// @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来解决问题。 这就解决了。 但我最好奇为什么上面的这种方法无法显示初始值。

Answer 1

看看这段代码，我确实使用了prop-types