反应不更新 DOM (Laravel)答案

【问题标题】：React not updating the DOM (Laravel)反应不更新 DOM (Laravel)
【发布时间】：2017-08-04 14:08:59
【问题描述】：

我已经建立了一个带有哈希导航的基本反应应用程序。问题是当我单击任何链接以在页面之间导航时，我看到 url 中的哈希值正在正确更改，并且我在我的layour 的render 中添加了一个console.log 以查看它是否被调用，它是，具有正确的this.props.children 值，但是页面没有呈现任何内容。如果我转到任何路线并刷新页面，我会看到呈现了正确的组件，但如果我从那里导航到某个地方，注意到会被呈现，直到我再次刷新。

import React from "react";
import ReactDOM from "react-dom";
import { IndexRoute, Router, Route, Link, hashHistory as history } from 'react-router';

class Layout extends React.Component {

  render() {
    console.log(this.props, document.location.hash);

    return <div>
      <div>
        <span>LEYAUTI MLEAYTI {Math.random()}</span>
      </div>
      <div>
        {this.props.children}
      </div>
      <div>
        {this.props.params.project}
      </div>
    </div>
  }
}

class CreateProject extends React.Component {

  render() {
    return <div>
      <h1>Create PROEKT</h1>
    </div>
  }
}

class Projects extends React.Component {

  render() {
    return <div>
      <h1>PROEKTI MROEKTI</h1>
      <Link to="/projects/create">New project</Link>
    </div>
  }
}

ReactDOM.render(
    <Router history={history}>
      <Route path="/" component={Layout}>
        <IndexRoute component={Projects}/>
        <Route path="projects/create" component={CreateProject}/>
      </Route>
    </Router>,
    document.getElementById('app-root'));

这是我在几条路线上导航时控制台中发生的情况的视觉效果，但 DOM 保持不变

【问题讨论】：

您可能需要在路径前面添加正斜杠 (/)，例如 <Route path="/projects/create"
@Aron 路由似乎工作正常，但是我尝试了您的建议，但效果不大。问题出在渲染部分，因为我的组件被正确传递了。
那么问题来了，虽然路由改变了，渲染函数运行了（因为你可以看到console.log），但是在你刷新之前页面没有任何变化？
@Aron 是的，我看到在第一次打开的任何路线上加载的初始页面。
从这里很难看出为什么它不起作用。我建议创建一个 JSFiddle 来展示问题，以便我们可以尝试以这种方式进行调试。

标签： javascript laravel reactjs

【解决方案1】：

这可能是 hashHistory 的问题。您使用的是哪个反应路由器版本？对于 v4 及更高版本，您需要像这样使用历史记录 -

import createHistory from 'history/createHashHistory'
const history = createHistory()
// pass history to the Router....

【讨论】：

我正在使用第 3 版的反应路由器和历史记录。这不是路由的问题，即使我这样做this.setState 也没有对 DOM 应用任何更改，它根本没有更新 DOM
我不能分享回购，因为它是一家私人公司。我只是尝试创建一个仅包含此代码的新公共存储库，然后它就起作用了。所以问题出在我当前项目的某个地方，现在我将它包含在一个 laravel 项目中，我不知道这是否有任何意义，但我现在真的不知道该怎么想..
我真的很迷信，检查 repo 设置，尝试克隆和 npm 安装到不同的文件夹等。
嗯，我想我找到了问题...目前我的代码正在使用blade 呈现，其中client.min.js 的srcipt 标记位于@section 中。如果我从视图中删除所有刀片标记并仅保留 html 标记，那么 react 就可以正常工作。你有什么想法吗？
结果出乎意料，感谢您抽出宝贵时间，先生。

【解决方案2】：

如果您只更新 url 中的主题标签，您的组件实际上并没有卸载/重新安装。然而，路线已更新。因此，当您刷新页面时，您只能看到组件加载内容一次。

您需要创建状态变量并在 routeChange 处理程序回调中更新它，并使用 setState 将更新后的状态变量绑定到您的视图。然后可以更新组件。

有关如何添加路由更改侦听器（https://github.com/ReactTraining/react-router/issues/3554），请参阅此帖子

【讨论】：

【解决方案3】：

好的，所以我已经深入了解了。

问题是我在 laravel 5.4 默认布局的默认 app.js 文件之前包含了我的 client.min.js 文件。由于某种原因，它以一种非常奇怪的方式做出了反应。我要做的是切换两个文件的包含顺序。

【讨论】：