如何用钩子在ReactJS中设置API请求的状态响应

Question

当您通过提交表单调用API请求时，如何设置Axios响应？我想从/在POST方法中发送表单，并获得API响应，然后用API响应重定向到/result页面。我的代码在下面，它引发

警告：无法对卸载的组件执行React状态更新。
这是一个no-op，但它表示应用程序中存在内存泄漏。
若要修复，请取消useEffect清理函数中的所有订阅和异步任务。在家（在app.js:21)

完成handleSubmit后，Submited存储true，但res仍然初始化为{}，而不存储API响应。甚至console.log（response）也显示API的正确响应。我想做一个文本分类器WEB服务。我可能不得不使用warning所说的useEffect，但我不确定。并且不知道如何将其与表单提交一起使用。谢谢.

js prettyprint-override">function App() {
  return (
    <BrowserRouter>
      <div>
        <Switch>
          <Route exact path="/">
            <Home />
          </Route>
          <Route path="/result">
            <Result />
          </Route>
        </Switch>
      </div>
    </BrowserRouter>
  );
}

function Home() {
  const useInput = initialValue => {
    const [value, setValue] = useState(initialValue)
    return {
      value, 
      setValue,
      reset: () => setValue(''),
      bind: {
        value,
        onChange: event => {setValue(event.target.value)}
      }
    }
  }

  const [submitted, setSubmitted] = useState(false);
  const {value: url, bind: bindUrl, reset: resetUrl} = useInput('')
  const {value: content, bind: bindContent, reset: resetContent} = useInput('')
  const [res, setRes] = useState({})

  const handleSubmit = (event) => {
    event.preventDefault()
    axios.post('http://127.0.0.1:5000/predict', {url:url, content:content}) // My API
    .then(response => {
      setSubmitted(true)
      console.log(response)
      setRes(response) // This doesn't work
    })
  }
  if (submitted) {
    return <Redirect push to={{
      pathname: '/result',
      state: {response: res}
    }}
    />
  }   
  return (
  <div>
    <h1>Send URL and Content</h1>
    <form onSubmit={handleSubmit}>
        <label>
          URL:
          <input name="url" type="text" {...bindUrl} />
        </label>
        <br />
        <label>
          content:
          <input name="content" type="text" {...bindContent} />
        </label>
        <br />
        <input type="submit" value="Submit" />
        </form>
  </div>
  );
}

Answer 1

您可以将此代码段添加到代码中

useEffect(() => {
  if(Object.values(response).length) {  // Here place an valid check to know if valid response is present
      setSubmitted(submitted => !submitted)
  }
}, [response])

并将API调用方法更改为

const handleSubmit = (event) => {
event.preventDefault()
axios.post('http://127.0.0.1:5000/predict', {url:url, content:content}) // My API
.then(response => {
  setRes(response)
})
}