React中给Button的onClick传箭头函数出现类型错误的求助

问题根源 #

你写的自定义组件（OfflineTextField、SaveInputButton、LoadInputButton）没有正确处理React组件的props参数。React组件的第一个参数是props对象，而非单个回调函数。比如SaveInputButton现在直接把传入的props对象当成了onClick参数，导致内部Button绑定的onClick是个对象而非函数，触发了警告。

修复步骤 #

1. 所有自定义组件都要从props对象中解构需要的属性，比如把(onClick)改成({ onClick })，(onChange)改成({ onChange })。
2. 调用自定义组件时，统一用JSX语法（比如<OfflineTextField onChange={onInputChange} />），替代函数调用形式，这更符合React规范。

修复后的完整代码 #

imports [...]

const OfflineTextField = ({ onChange }) => {
  return (
    <TextField onChange={onChange} multiline={true} />
  );
};

const SaveInputButton = ({ onClick }) => {
  return (
    <Button onClick={onClick} color="primary">
      Save text
    </Button>
  );
};

const LoadInputButton = ({ onClick }) => {
  return (
    <Button onClick={onClick} color="primary">
      Load text
    </Button>
  );
}

const PocOfflineScreen = () => {
  const [input, setInput] = useState<string>("");
  const cacheName = 'testrapport';
  const url = 'http://localhost:3000';
  
  const onInputChange = (text: React.ChangeEvent<HTMLInputElement>) => {
    setInput(text.target.value);
  };

  return (
    <div>
      <OfflineTextField onChange={onInputChange} />
      <br />
      <SaveInputButton onClick={() => {
        if ('caches' in window) {
          caches.open(cacheName).then((cache) => {
            cache.put(url, new Response(JSON.stringify(input)));
            alert('Data added to cache');
          });
        }
      }}/>   
      <LoadInputButton onClick={() => {
        if ('caches' in window) {
          caches.open(cacheName).then((cache) => {
            cache.match(url).then((response: Response | undefined) => {
              if (response === undefined) {
                alert("Error: No cache found.");
              } else {
                response.json().then(data => {
                  setInput(data);
                });
              }
            });
          });
        }
      }}/>
    </div>
  );
};

额外优化建议 #

把缓存操作封装成单独函数，让组件代码更简洁：

const saveToCache = (cacheName: string, url: string, data: string) => {
  if ('caches' in window) {
    caches.open(cacheName).then((cache) => {
      cache.put(url, new Response(JSON.stringify(data)));
      alert('Data added to cache');
    });
  }
};

const loadFromCache = (cacheName: string, url: string, setInput: React.Dispatch<React.SetStateAction<string>>) => {
  if ('caches' in window) {
    caches.open(cacheName).then((cache) => {
      cache.match(url).then((response: Response | undefined) => {
        if (response === undefined) {
          alert("Error: No cache found.");
        } else {
          response.json().then(data => {
            setInput(data);
          });
        }
      });
    });
  }
};

之后在组件里直接调用：

<SaveInputButton onClick={() => saveToCache(cacheName, url, input)} />   
<LoadInputButton onClick={() => loadFromCache(cacheName, url, setInput)} />

内容的提问来源于stack exchange，提问作者JasperMW