Как использовать опасноSetInnerHTML

Question

У меня есть данные HTML-скрипта.

Я хочу поместить это в div. но когда я это делаю, он просто показывает "}" вот и все.

Интересно, что я сделал не так.

Когда я регистрирую newDataHTML, я могу получить строку html.

      import React, { useState, useEffect } from 'react';
import axios from 'axios';

function App() {

  const getData = () => {
    axios
      .get('/api/data')
      .then( (data) => {
        // get new Data
        const newDataHTML = data.data[0].rule;

        return {__html: newDataHTML};
      })
      .catch( err => console.log(err));
  }

  return (
    <div className="App">
      <Tabs defaultTab="data" onChange={(tabId) => { console.log(tabId) }}>
        <TabList>
          <Tab tabFor="data">New Data</Tab>
        </TabList>
        <TabPanel tabId="data">
          <div dangerouslySetInnerHTML={getData()}></div>;
        </TabPanel>
      </Tabs>
    </div>
  );
}

export default App;

Answer 1

Это не работает, потому что вы не можете вернуться за пределы метода .then, а также вы столкнетесь с циклом повторной визуализации ... Вы можете поместить метод в ловушку useEffect, чтобы он запускался один раз, а также поместите возвращаемые данные в useState ...

      const [data, setData] = useState();
useEffect(() => {
   const getData = () => {
      axios.get('/api/data').then((res) => {
        const newDataHTML = res.data[0].rule;
        setData({__html: newDataHTML})
      }).catch( err => console.log(err));
   }
   getData();
}, [])

теперь вы можете использовать переменную данных в своем jsx вместо вызова функции в своем jsx.

Также было бы неплохо использовать такие пакеты, как DomPurify, чтобы избежать xss-атак.

https://www.npmjs.com/package/dompurify