为什么我的 POST 请求会导致完全重新渲染？

Question

I'm new to react and having some very curious behaviour when sending a post request to firebase, hoping someone can explain. I have a form with two required text areas, both set respective state keys to their input value onChange. I then have a button hooked to a POST function using an axios instance.

The request goes through absolutely fine if none, or only one of the text areas has input.

If both text areas have input the request doesn't happen and instead I get a complete re-render/refresh of the page. I have tried chopping the code up many ways, adding conditionals to the POST function changing/testing the instance to see if I'm missing something, but nothing seems to work. I can't understand what is causing the rerender and stopping the request when the only change is a second input value. Any help appreciated!

Here is my code:

class NewPostForm extends Component {
  state = {
    title: "",
    offer: "",
    return: "",
  };

  postHandler = () => {
    const post = {
      title: this.state.title,
      offer: this.state.offer,
      return: this.state.return,
    };
      instance
        .post("/posts.json/", post)
        .then((response) => {
          console.log(response);
        })
        .catch((error) => {
          console.log(error);
        });
    }
  };
  render() {
return (
<form>
 <textarea
            key={"in0"}
            value={this.state.offer}
            onChange={(event) => this.setState({ offer: event.target.value })}
            required
          />
          <textarea
            key={"in1"}
            value={this.state.return}
            onChange={(event) => this.setState({ return: event.target.value })}
            required
          />

          <div style={{ display: "flex", alignItems: "center" }}>
            <MainButton click={this.postHandler} label={"Post"} />
            <MainButton click={this.props.click} label={"Cancel"} />
          </div>
        </form>)

MainButton def:

const MainButton = (props) => { 
  return (
    <button onClick={props.click} style={style}> {props.label} </button>
  ); 
};

Answer 1

A button or submit input within a form can trigger the form being "submitted" to a target, which in classic HTML fashion means sending the inputs back to the server, and then loading what the server returns into a new document. If you're doing fetch/axios/XHR/whatever instead on form button clicks, you need to prevent the default behavior through the event object. Change your onClick handler to:

postHandler = e => {
  e.preventDefault();

  // rest of the code
};