Question

我正在使用 REACT 开发一个 CRUD 应用程序，但在调用 API 的“post”方法时尝试更新状态时我可能做错了什么。

例如，这是仪表板。它有状态“dragons/setDragons”，我要发送给“CreateDragon”组件

import axios from "axios";
import moment from "moment";
import { Card, Button, Badge, Container, Row, Col } from "react-bootstrap";
import { BsTrash } from "react-icons/bs";
import HeroSection from "../../components/HeroSection";
import CreateDragon from "../../components/CreateDragon";

export default function DragonList() {
  const [dragons, setDragons] = useState([]);

  useEffect(() => {
    axios
      .get("http://5c4b2a47aa8ee500142b4887.mockapi.io/api/v1/dragon")
      .then((response) => {
        const { data } = response;
        data.sort((a, b) => a.name.localeCompare(b.name));
        setDragons(data);
      });
  }, []);

  function handleDeleteDragon(id) {
    axios.delete(
      `http://5c4b2a47aa8ee500142b4887.mockapi.io/api/v1/dragon/${id}`
    );
    const dragonsStillActive = dragons.filter((dragon) => dragon.id !== id);
    setDragons(dragonsStillActive);
  }

  function handleCreateDragon() {
    axios
      .post("http://5c4b2a47aa8ee500142b4887.mockapi.io/api/v1/dragon")
      .then((response) => {
        const newDragon = response.data;
        const allDragons = [newDragon, ...dragons];
        allDragons.sort((a, b) => a.name.localeCompare(b.name));
        setDragons(allDragons);
      });
  }

  return (
    <>
      <HeroSection
        homeBg
        lightText
        headline="Organize sua coleção de dragões com facilidade"
      />

      <Container>
        <CreateDragon dragons={dragons} setDragons={dragons} />
        <button type="button" onClick={() => handleCreateDragon()}>
          gerar
        </button>
        <Row>
          {dragons.map(({ id, name, type, createdAt }) => (
            <Col lg="3" className="my-3">
              <Card key={id}>
                <Card.Body>
                  <Card.Title>{name}</Card.Title>
                  <Badge pill variant="dark">
                    {type}
                  </Badge>
                  <Card.Text>
                    Criado em {moment(createdAt).format("LLL")}
                  </Card.Text>
                  <Button
                    type="button"
                    variant="danger"
                    onClick={() => handleDeleteDragon(id)}
                  >
                    <BsTrash /> Remover
                  </Button>
                </Card.Body>
              </Card>
            </Col>
          ))}
        </Row>
      </Container>
    </>
  );
}

这是 CreateDragonComponent。当用户点击“提交”时，它应该通过 handleCreateDragon 调用 API 的 post 方法并更新“仪表板”文件上的状态。但它做得不好。

import React from "react";
import { Row, Col, Form, Button } from "react-bootstrap";
import axios from "axios";
import useInput from "../hooks/useInput";

export default function CreateDragon({ dragons, setDragons }) {
  const { value: name, bind: bindName, reset: resetBindName } = useInput("");
  const { value: type, bind: bindType, reset: resetBindType } = useInput("");

  function handleCreateDragon(event) {
    event.preventDefault();
    axios
      .post("http://5c4b2a47aa8ee500142b4887.mockapi.io/api/v1/dragon", {
        name,
        type,
      })
      .then((response) => {
        const { id, dragonName = name, dragonType = type } = response.data;
        const newDragon = { id, name: dragonName, type: dragonType };

        setDragons([newDragon, ...dragons]);
      })
      .catch((error) => {
        console.log(error);
      });

    resetBindName();
    resetBindType();
  }
  return (
    <>
      <div style={{ border: "1px solid red" }} className="p-5 my-5">
        <h1>Capturou um novo dragão?</h1>
        <p>Faça o registro do seu novo amigo abaixo</p>
        <Form onSubmit={handleCreateDragon}>
          <Row>
            <Col lg="6" className="my-3">
              <Form.Group>
                <Form.Label>Qual o nome do seu dragão?</Form.Label>
                <Form.Control
                  id="name"
                  type="text"
                  placeholder="Nome"
                  {...bindName}
                />
              </Form.Group>
            </Col>
            <Col lg="6" className="my-3">
              <Form.Group>
                <Form.Label>Defina o tipo do seu dragão</Form.Label>
                <Form.Control
                  id="type"
                  type="text"
                  placeholder="Tipo"
                  {...bindType}
                />
              </Form.Group>
            </Col>
          </Row>
          <Button
            className="d-block w-50 m-auto"
            variant="success"
            type="submit"
          >
            Criar
          </Button>
        </Form>
      </div>
    </>
  );
}

有人知道我做错了什么吗？

代码：https://github.com/augustomallmann/dragons 问题发生在路线 '/dragoes

Answer 1

这是因为在渲染 CreateDragon 时，您将龙传递给 setDragons 道具：setDragons={dragons}。

您应该将其更改为 setDragons={setDragons}。

不更新状态或用户界面

1 个答案: