Question

我的一个应用程序遇到问题。我是新来的反应。我正在使用Laravel并共同做出反应。我的问题是我正在从laravel控制器的api获取数据。但是结果是以html格式出现的，但渲染后却破坏了html代码。我曾经使用过从'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'));
}

Answer 1

它由我解决。

导入解析，{domToReact}，来自“ html-react-parser”；

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

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

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

Answer 2

请也分享您的laravel代码。我认为问题是如果您在route / api.php中编写路由。在这种情况下，您需要在路由名称前添加api，例如http://google.com/api/upcomingdues。

来自Laravel的React JS Axios数据响应

2 个答案: