获取 axios 响应时更改按钮颜色

Question

我有一个调用端点的反应控制器。当我收到响应时，我会在一个对象中显示信息，并且我想更改按钮的颜色以表示响应是 200 还是 404。

import React, { useState, useEffect } from "react";
import "./../App.css";
import axios from "axios";
const MicroService = (props) => {
  const [personsGet, setPersonGet] = useState([]);

  function llamadaAxiosGet (url) {
    axios
      .get(url)
      .then((res) => {
        setPersonGet(res.data);
        return res.status;
      })
      .catch(function (error) {
        return error.status;
      });
  }

  return (
    <div>
      <h2>Microservicio:</h2>
      <BotonLlamada
        url={`https://jsonplaceholder.typicode.com/users`}
        textBoton={"Llamada al servicio y display all"}
        llamadaAxiosGet={llamadaAxiosGet}
      />
      {personsGet.map((person) => (
        <li key={person.name}>{person.name}</li>
      ))}
    </div>
  );
};

function BotonLlamada(props) {
  const [colorButon, setColorButon] = useState("");
  const [estado , setEstado]= useState(0);

  const onClickbuton = () => {
    setEstado(props.llamadaAxiosGet(props.url));
    setEstado(props.llamada);
    if (estado === 200) {
      setColorButon("buttonGreen");
    } else if (estado > 399) {
      setColorButon("buttonRed");
    }
  };

  useEffect(() => {
    if (estado > 399) {
      setColorButon("buttonRed");
    } else if (estado === 200) {
      setColorButon("buttonGreen");
    }
  },[estado]);
  return (
    <div>
      <button onClick={onClickbuton} className={colorButon}>
        {props.textBoton}
      </button>
      <br />
    </div>
  );
}

export default MicroService;

所以在代码中，因为 axios 是异步的，所以在完成按钮中的 onClick 方法后会收到响应，但按钮不会改变颜色。 有人可以帮忙吗？

Answer 1

我认为你应该在BotonLlamada 组件中移动llamadaAxiosGet 函数调用并将setPersonGet 状态属性传递给它：

const MicroService = (props) => {
  const [personsGet, setPersonGet] = useState([]);

  return (
    <div>
      <h2>Microservicio:</h2>
      <BotonLlamada
        textBoton={"Llamada al servicio y display all"}
        setPersonGet={setPersonGet}
      />
      {personsGet.map((person) => (
        <li key={person.name}>{person.name}</li>
      ))}
    </div>
  );
};

function BotonLlamada(props) {
  const [colorButon, setColorButon] = useState("");
  const [estado , setEstado]= useState(0);

  function llamadaAxiosGet () {
    axios
      .get(`https://jsonplaceholder.typicode.com/users`)
      .then((res) => {
        props.setPersonGet(res.data);
        setEstado(res.status);
        setColorButon("buttonGreen");
      })
      .catch(function (error) {
        setEstado(error.status);
        setColorButon("buttonRed");
      });
  }

  useEffect(() => {
    if (estado > 399) {
      setColorButon("buttonRed");
    } else if (estado === 200) {
      setColorButon("buttonGreen");
    }
  },[estado]);

  return (
    <div>
      <button onClick={() => llamadaAxiosGet() } className={colorButon}>
        {props.textBoton}
      </button>
      <br />
    </div>
  );
}

export default MicroService;

Answer 2

您的问题是您将状态设置为数字承诺。

一个简单的解决方法是：

const onClickbuton = () => {
  props.llamadaAxiosGet(props.url)
    .then(status => setEstado(status));
};

您还可以重构并将您的逻辑转移到父组件。

import React, { useState } from "react";
import "./../App.css";
import axios from "axios";

function BotonLlamada({ colour, onClick, textBoton }) {
  return (
    <div>
      <button onClick={onClick} className={colour}>
        {textBoton}
      </button>
      <br />
    </div>
  );
}

const MicroService = (props) => {
  const [personsGet, setPersonGet] = useState([]);
  const [colour, setColour] = useState("");

  function llamadaAxiosGet(url) {
    axios
      .get(url)
      .then((res) => {
        setPersonGet(res.data);
        return res.status;
      })
      .catch(function (error) {
        return error.status;
      })
      .then((status) => {
        if (status > 399) {
          setColour("buttonRed");
        } else if (status === 200) {
          setColour("buttonGreen");
        }
      });
  }

  return (
    <div>
      <h2>Microservicio:</h2>
      <BotonLlamada
        textBoton={"Llamada al servicio y display all"}
        onClick={() =>
          llamadaAxiosGet(`https://jsonplaceholder.typicode.com/users`)
        }
        colour={colour}
      />
      {personsGet.map((person) => (
        <li key={person.name}>{person.name}</li>
      ))}
    </div>
  );
};

export default MicroService;