如何使用 fetch 和调用 rest api

Question

如何在上面的代码中添加fetch 我试图在 setEffect 中使用 fetch 调用 rest API，但出现错误。

目标：在我提交表单时调用其余 API。 到目前为止，我能够从表单动态生成 URL，并且无法连接以获取和调用其余 API。

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')
);

Answer 1

首先，onChange 应该在输入元素上，而不是在表单上。你应该使按钮类型=“提交”。您应该在表单上添加 onSubmit={handleSubmit} 。在 handleSubmit 你应该添加事件并防止默认行为 handleSubmit(e) { e.preventDefault(); ... }。

然后您可以在 handleSubmit 中调用您的 fetch api。

        const { useState } = React;
        
        function Example() {  
               const [ form, setForm ] = useState({one:'',two:''});
                function handleSubmit(e) {
                    e.preventDefault();
                    const uri = `http://example.com/?$one=
{form.one}&tow=${form.two}`;
                    fetch(uri, {
                        method: 'POST', // *GET, POST, PUT, DELETE, etc.)
                        body: JSON.stringify(form),
                    }).then(r=>{
                        console.log(r)
                    })
                    // 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 (
                <div >
                    <form onChange={handleSubmit}>
                        <fieldset>
                            <legend>Input one</legend>
                            <input name="one" value={form.one} onChange={handleChange}/>
                        </fieldset>
                        <fieldset>
                            <legend>Input two</legend>
                            <input name="two" value={form.two} onChange={handleChange}/>
                        </fieldset>
                        <button type="button" onClick={handleSubmit}>Submit</button>
                    </form>
                </div>
              );
    };
    
    ReactDOM.render(
      <Example />,
      document.getElementById('react')
    );

这对我很有效。