将数据从反应发送到 django rest api答案

【问题标题】：send Data from react to django rest api将数据从反应发送到 django rest api
【发布时间】：2021-06-11 18:47:00
【问题描述】：

经过大量搜索后，我一直在寻找如何使用类而不是函数将数据从 react 发送到 django api 那么我如何将其转换为功能组件（这不是我的代码，只是一个示例）

    export default class CreateRoomPage extends Component {
      constructor(props) {
        super(props);
        this.state = {
          guestCanPause: this.props.guestCanPause,
          votesToSkip: this.props.votesToSkip,
          errorMsg: "",
          successMsg: "",
        };
        this.handleRoomButtonPressed = this.handleRoomButtonPressed.bind(this);
        this.handleVotesChange = this.handleVotesChange.bind(this);
      }

      handleGuestCanPauseChange(e) {
        this.setState({
          guestCanPause: e.target.value === "true" ? true : false,
        });
      }

    handleRoomButtonPressed() {
      const requestOptions = {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({
          votes_to_skip: this.state.votesToSkip,
          guest_can_pause: this.state.guestCanPause,
        }),
      };
      fetch("/api/create-room", requestOptions)
        .then((response) => response.json())
        .then((data) => this.props.history.push("/room/" + data.code));
    }

    renderCreateButtons() {
      return (
        <Grid container spacing={1}>
          <Grid item xs={12} align="center">
            <Button
              color="primary"
              variant="contained"
              onClick={this.handleRoomButtonPressed}
            >
              Create A Room
            </Button>
          </Grid>
        </Grid>
      );
    }
    }

【问题讨论】：

标签： reactjs django django-rest-framework react-hooks

【解决方案1】：

我建议先学习 React 类和 DRF，然后再尝试学习 React 功能组件和钩子，因为有更多资源可用于学习基于类的 React。

如果您这样做了，您就会知道将此特定代码转换为功能组件并没有什么特别之处。只需丢掉“this”并将方法声明为函数（箭头函数/经典函数 - 没关系）

PS：学习基于类的 React 并没有什么可失去的 - 几乎是一样的，大部分差异将有助于理解 React 如何工作/类如何在计算机上工作（可以说对任何程序员都很重要）。

【讨论】：

是的，我确实意识到基于类的 React 有更多的资源，但我也听说功能组件要优越得多，所以我认为从一开始就学习会更好
我确实更喜欢函数式组件，因为它们具有更高的划分不同效果和逻辑的能力，但我不会说它们比它们优越得多。如果您发现必须使用 React 的“高阶组件”或“渲染道具”，那将是使用更多功能组件的好时机。
好的，我现在就去上课，但如果有人仍然可以告诉我如何将代码转换为功能组件，那就更好了。

【解决方案2】：

我也在学习，我的方法：

import { useHistory } from "react-router";


export default function CreateRoomPage () {

const history = useHistory();

const [guestCanPause, setGuestCanPause] = useState(true)
const [votesToSkip, setVotesToSkip] = useState(1)

const handleGuestCanPauseChange = () => {
  setGuestCanPause(current => !current)
}

const handleVotesChange = (e) => {
  setVotesToSkip(e.target.value)
 }

const handleRoomButtonPressed = async () => {
  const requestOptions = {
    method: "POST",
    headers: { "Content-Type": "application/json" },
    body: JSON.stringify({
      votes_to_skip: votesToSkip,
      guest_can_pause: guestCanPause,
    }),
  };
  await fetch("/api/create-room", requestOptions)
    .then((response) => response.json())
    .then((data) => history.push("/room/" + data.code));
}

【讨论】：