时间戳

首页 > 解决方案 > 为什么我的 POST 请求会导致完全重新渲染？

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

问题描述

我是新来的，在向 Firebase 发送帖子请求时会有一些非常奇怪的行为，希望有人能解释一下。我有一个包含两个必需文本区域的表单，它们都将各自的状态键设置为它们的输入值 onChange。然后，我有一个使用 axios 实例连接到 POST 函数的按钮。

如果没有，或者只有一个文本区域有输入，则请求绝对可以通过。

如果两个文本区域都输入了请求，则不会发生请求，而是我会完全重新渲染/刷新页面。我已经尝试以多种方式切割代码，向 POST 函数添加条件来更改/测试实例以查看我是否遗漏了某些内容，但似乎没有任何效果。当唯一的变化是第二个输入值时，我无法理解是什么导致了重新渲染和停止请求。任何帮助表示赞赏！

这是我的代码：

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

主按钮定义：

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

标签： javascriptreactjsfirebaseaxios

解决方案

表单中的按钮或提交输入可以触发表单被“提交”到目标，这在经典的 HTML 方式中意味着将输入发送回服务器，然后将服务器返回的内容加载到新文档中。如果您在表单按钮单击时执行 fetch/axios/XHR/whatever，则需要通过事件对象阻止默认行为。将您的 onClick 处理程序更改为：

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

  // rest of the code
};

推荐阅读