我正在开发一个应用程序，其中Flask REST API接受两个字符串并返回一个浮点值作为预测。现在我正在尝试连接到React应用程序，以便可以在网页上显示这些预测。
目标：从前端获取两个字符串，使用REST API进行推理，并在前端显示预测值。
下面是用于在React应用程序中获取REST 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> );}运行修改后的代码时，我得到了这个错误
回答：
-
创建一个新的
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 } // 由于监听器附加在表单元素上 // （见下面的“附加文档”） // 检查被更改的元素是否为输入 // 然后使用名称作为键更新状态对象， // 并将输入的值作为该键的对象值添加 function handleChange(e) { const { nodeName, name, value } = e.target; if (nodeName === 'INPUT') { setForm({ ...form, [name]: value }); } } // 每个输入都有一个名称，并从表单状态中维护其 // 值 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>附加文档
