reactjs - 与 TypeScript react ，prompt() 返回值

Question

当我想要更新我的状态时，TypesScript 显示错误

TyepScript在getApiKey函数内的setapiKey(prompValue);中用红色下划线显示prompValue，错误为:

Argument of type 'string | null' is not assignable to parameter of type 'SetStateAction'.Type 'null' is not assignable to type 'SetStateAction'.ts(2345)

问题是什么，我该如何解决这个问题？

function App() {

  const [apiKey, setapiKey] = useState('');

  const getApiKey = () => {
    const prompValue = prompt('Enter API Key');
    setapiKey(prompValue);
  }

  return (
    <div className="App">
      <h1>App</h1>
      <button onClick={getApiKey}>API</button>
      <p>{apiKey}</p>
    </div>
  );
}

Answer 1

其实这就是typescript的强大之处。 提示返回字符串 | 空。

您应该处理用户取消提示对话框的情况，以减少错误。

function App() {

  const [apiKey, setapiKey] = useState('');

  const getApiKey = () => {
    const prompValue = prompt('Enter API Key');
    if(prompValue === null) {
      // do what ever you want when the user cancel the prompt
    }
    else {
      setapiKey(prompValue);
    }
  }

  return (
    <div className="App">
      <h1>App</h1>
      <button onClick={getApiKey}>API</button>
      <p>{apiKey}</p>
    </div>
  );
}