时间戳

首页 > 解决方案 > 来自 Laravel 的 React JS Axios 数据响应

reactjs - 来自 Laravel 的 React JS Axios 数据响应

问题描述

我的一个应用程序遇到问题。我是新来的反应。我正在使用 laravel 并一起做出反应。我的问题是我从一个 laravel 控制器的 api 获取数据。但是以 html 格式出现但呈现的结果会破坏 html 代码。我使用了像import parse from 'html-react-parser' 这样的解析器；从'react-render-html'导入renderHTML；

但两者都不起作用，它也停止了我的结果数据。

export default class Notify extends Component {

    state={
        duelist:[]
    }

    componentDidMount() {
        axios.get(`upcomingdues`)
          .then(res => {
            const duelist = res.data;
            //console.log(res.data);
            this.setState({ duelist });
          })
      }

    render() {
        const mystyle = {
            height: "300px",
            overflow: "hidden"
        };
        const mystyle1 = {
            left: "0px",
            bottom: "0px"
        };
        const mystyle2 = {
            left: "0px",
            width: "0px"
        };
        return (
            <div> 
               <div className="tab-content">
                <div className="tab-pane active show" id="topbar_notifications_notifications" role="tabpanel">
                 <div className="kt-notification kt-margin-t-10 kt-margin-b-10 kt-scroll ps" 
                 data-scroll="true" data-height="300" data-mobile-height="200" style={mystyle}>

               {this.state.duelist}





                </div>
                </div>
                </div>
                <div className="ps__rail-x" style={mystyle1}>
                <div className="ps__thumb-x" tabindex="0" style={mystyle2}></div>
                </div>
            </div>                              
        );
    }
}

if (document.getElementById('notify')) {
    ReactDOM.render(<Notify />, document.getElementById('notify'));
}

标签： reactjslaravelaxios

解决方案

它由我决定。

从 'html-react-parser' 导入解析，{ domToReact }；

我使用了反应解析器，我在上面的代码中的问题是反应设置状态，但是在设置状态之后我正在解析状态。所以我现在做的是

componentDidMount() {
        axios.get(`upcomingdues`)
          .then(res => {
            const duelist = parse(res.data);
            //console.log(res.data);
            this.setState({ duelist });
          })
      }

在设置状态和渲染之前解析它，这一切对我来说都很完美。

推荐阅读