如何在reactjs中使用fetch從restapi帶來預測

我正在構建一個應用程式，其中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);
      });
  }, []);

在取/predict?solute=CC(C)(C)Br&solvent=CC(C)(C)O這里solute=CC(C)(C)Br和solvent=CC(C)(C)O是燒瓶休息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>
  );
}

運行修改后的代碼我收到此錯誤

uj5u.com熱心網友回復：

1. 創建一個新的form狀態。

2. 創建一個包含一些輸入元素的表單，以及一個提交表單的按鈕。

3. 當輸入元素改變時，form用它們的值更新狀態。

4. 提交表單后，使用 中的資訊創建一個新的 URI form，然后執行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 - that's what's happening when we attach one listener to the form rather than listeners to all the inputs. The form catches the events from the inputs as they bubble up the DOM. But it's also why we need to identify what element they are, hence the need for nodeName.

• Destructuring assignment

標籤：反应 休息 机器学习 拿来 烧瓶宁静

上一篇：在PowerShell中使用GET并將JSON匯出為CSV

下一篇：VersionOneRest查詢已洗掉專案