如何在 react js 中使用 fetch 从 rest api 中获取预测

Question

我正在构建一个应用程序，其中 flask rest API 采用两个字符串并给出一个浮点值作为预测。现在我正在尝试连接到 React 应用程序，以便可以在网页上显示预测。

目标：从前端获取两个字符串并使用 restapi 进行推理并在前端给出预测值。

下面是用于在 React 应用程序中获取其余 API 预测的代码。

function App() {
  const [state, setState] = useState([{}]);

  useEffect(() => {
    fetch("/predict?solute=CC(C)(C)Br&solvent=CC(C)(C)O")
      .then((res) => res.json())
      .then((data) => {
        setState(data);
        console.log(data);
      });
  }, []);

在 fetch /predict?solute=CC(C)(C)Br&solvent=CC(C)(C)O 这里 solute=CC(C)(C)Br 和 solvent=CC(C)(C)O 是 flask rest API 给出预测的输入。

但我想从前端给它，而不是在 URL 中提到。怎么做？

修改代码以获取结果并显示

function App() {
  const [state, setState] = useState([{}]);
  const [uri, setUri] = useState([{}]);
  const [resultstate, setResultState] = useState([{}]);

  function HandleSubmit() {
    const uri = "http://127.0.0.1:3000/?${form.one}&${form.two}";
    setUri(uri);
    useEffect(() => {
      fetch(uri)
        .then((response) => {
          if (response.status === 200) {
            return response.json();
          }
        })
        .then((data) => {
          setResultState(data);
          console.log(data);
        });
    });
  }

  function handleChange(e) {
    const { nodeName, name, value } = e.target;
    if (nodeName === "INPUT") {
      setState({ ...FormData, [name]: value });
    }
  }

  return (
    <div className="App">
      <state onChange={handleChange}>
        <fieldset>
          <legend>Solute</legend>
          <input name="one" value={state.one} />
        </fieldset>
        <fieldset>
          <legend>Solvent</legend>
          <input name="two" value={state.two} />
        </fieldset>
        <button type="button" onClick={HandleSubmit}>
          Submit
        </button>
      </state>
      <Deploy />
    </div>
  );
}

运行修改后的代码出现这个错误

Answer 1

创建一个新的 form 状态。
创建一个带有一些输入元素的表单，以及一个提交表单的按钮。
当输入元素改变时，用它们的值更新 form 状态。
提交表单后，使用 form 中的信息创建一个新的 URI，然后执行 fetch.

const { useState } = React;

function Example() {

  const [ form, setForm ] = useState({});

  function handleSubmit() {
    const uri = `http://example.com/?${form.one}&${form.two}`;
    console.log(`Current state: ${JSON.stringify(form)}`);
    console.log(`Fetch URI: ${uri}`);
    // fetch(uri)... etc
  }

  // Because the listener is attached to the form element
  // (see "Additional documentation" below)
  // check that the element that's been changed is an input
  // and then update the state object using the name as a key, and
  // adding the value of the input as the object value for that key
  function handleChange(e) {
    const { nodeName, name, value } = e.target;
    if (nodeName === 'INPUT') {
      setForm({ ...form, [name]: value });
    }
  }

  // Each input has a name, and maintains its
  // value from the form state
  return (
    <form onChange={handleChange}>
      <fieldset>
        <legend>Input one</legend>
        <input name="one" value={form.one} />
      </fieldset>
      <fieldset>
        <legend>Input two</legend>
        <input name="two" value={form.two} />
      </fieldset>
      <button type="button" onClick={handleSubmit}>Submit</button>
    </form>
  );
};

ReactDOM.render(
  <Example />,
  document.getElementById('react')
);

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/17.0.2/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.2/umd/react-dom.production.min.js"></script>
<div id="react"></div>

其他文档

Event delegation - 这就是我们将一个侦听器附加到表单而不是所有输入的侦听器时发生的情况。当输入冒泡 DOM 时，表单会捕获来自输入的事件。但这也是我们需要确定它们是什么元素的原因，因此需要 nodeName.
Destructuring assignment

如何在 react js 中使用 fetch 从 rest api 中获取预测

How to do bring predictions from rest api using fetch in react js

reactjs

rest

machine-learning

fetch

flask-restful