Блог

Я собираюсь res.data вернуться к другому компоненту. Я использую res.data для отображения результатов возвращенного JSON в пользовательский интерфейс.

Однако я хотел бы использовать res.data для условного отображения определенные кнопки. Я использую getData() для вызова API.

 // src/utils/debugger
let data = [];

async function getData(filter, captureName) {
  if (captureName === '') {
    flash('Please enter your capture name!', 5000, { color: 'red', inpType: 'danger' });
  } else {
    axios({
      method: 'GET',
      url: `http://xxx/debugger/${filter}/${captureName}/logs`,
    })
      .then((res) => {
        if (res.data.length === 0) {
          flash('No logs have been collected for this debug capture.', 5000, {
            color: 'yellow',
            inpType: 'warning',
          });
        } else {
          flash('Your capture has been imported', 3000, {
            color: 'green',
            inpType: 'success',
          });
          console.log(res.data);
          data = res.data;
        }

        return res.data;
      })
      .catch((err) => {
        console.log(err);
      });
  }
}
 

Я хотел бы res.data вернуться к нижеприведенному компоненту, чтобы я мог условно отображать кнопки.

 // src/component/buttons
const AllButtons = () => {
  const [data, setData] = useState([]);

  return (
    <div>
      <section id='request' className={sectionStyles}>
        <div className='mt-5 inline-flex space-y-4 flex-wrap'>
          <span></span>
          <PrimaryBtn onClick={() => setData(adHeight())}>ad Height</PrimaryBtn>
          <PrimaryBtn onClick={() => setData(adTagId())}>ad Tag Id</PrimaryBtn>
          <PrimaryBtn onClick={() => setData(adWidth())}>ad Width</PrimaryBtn>
          <PrimaryBtn onClick={() => setData(appBundle())}>app Bundle</PrimaryBtn>
          <PrimaryBtn onClick={() => setData(appStoreUrl())}>app Store Url</PrimaryBtn>
          <PrimaryBtn onClick={() => setData(askPrice())}>ask Price</PrimaryBtn>
 

Я хотел бы сделать что-то подобное:

 // src/component/buttons
if( res.data === "someString") {
   return (
       <PrimaryBtn onClick={() => setData(adHeight())}>ad Height</PrimaryBtn>
          <PrimaryBtn onClick={() => setData(adTagId())}>ad Tag Id</PrimaryBtn>
          <PrimaryBtn onClick={() => setData(adWidth())}>ad Width</PrimaryBtn>
   )
} else {
    return (//something else)
}
 

Я обнаружил,что проще использовать async/await с помощью крючка useEffect, перемещая логику flash внутри крючка, чтобы решить эту проблему.

  async function getData(filter,captureName) => {
  try {
  const res = await axios({
     method: 'GET',
     url: `http://xxx/debugger/${filter}/${captureName}/logs`,
    })
  return res.data
 }catch(error){
   throw Error(error)
 }
}
const AllButtons = ({filter,captureName}) => { // assuming component receives these two props
 const [data, setData] = useState([]);
 useEffect(async() => {
   if (captureName === '') {
     flash('Please enter your capture name!', 5000, { color: 'red', 
     inpType: 'danger' });
   }else {
   try{
    const response = await getData(filter, captureName) // response represents res.data
    if (response.length === 0) {
      flash('No logs have been collected for this debug capture.', 5000, {
        color: 'yellow',
        inpType: 'warning',
      });
    } else {
      flash('Your capture has been imported', 3000, {
        color: 'green',
        inpType: 'success',
      });
     setData(response) // setting the state to be used while rendering
    }
   }
   catch(err) {
     console.log(err);
    }
 }
 },[])

if(data === "someString") {
   return (
   <PrimaryBtn onClick={() => setData(adHeight())}>ad Height</PrimaryBtn>
      <PrimaryBtn onClick={() => setData(adTagId())}>ad Tag Id</PrimaryBtn>
      <PrimaryBtn onClick={() => setData(adWidth())}>ad Width</PrimaryBtn>
   )
}else{
return (//something else)
}
}