Javascript React子组件未在路由上触发

我对React非常陌生，一直在考虑使用headless WP后端构建我的第一个React应用程序

我无法在我的

MoviePage

类中触发

componentDidMount

。我希望有人能帮助我理解我做错了什么

这是我的代码，可能并不完美，因为这是我的第一次尝试

注意代码现在已更改为添加来自评论的建议-检查原始代码的编辑历史记录（它仍处于中断状态）

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import { BrowserRouter } from 'react-router-dom';
import './index.css';
import App from './App';
import registerServiceWorker from './registerServiceWorker';

ReactDOM.render((
        <BrowserRouter>
            <App />
        </BrowserRouter>
    ), 
    document.getElementById('root'));
registerServiceWorker();

从“React”导入React；
从“react dom”导入react dom；
从“react router dom”导入{BrowserRouter}；
导入“./index.css”；
从“./App”导入应用程序；
从“./registerServiceWorker”导入registerServiceWorker；
ReactDOM.render((
努力把它提升到一个新的水平

任何帮助都将不胜感激，而且任何关于如何改进我的代码以符合最佳实践的建议都将是非常好的

谢谢大家。
我认为问题在于，您实际上没有将react应用程序附加到DOM anywhere。在某个地方，您需要使用react DOM将应用程序附加到页面上的某个根元素。然后，您的组件将装载并呈现

对你来说可能是这样的：

ReactDOM.render(App, document.getElementById('my-root-element'))

查看更多信息


编辑

我认为您可能在渲染时遇到了导致此问题的错误。如果您在初始渲染时遇到错误，您将永远无法进入componentDidMount

如果查看
MoviePage
类，则在初始化时将状态设置为
movie:[]
。最终将获取一部电影，这可能是一个对象。但在获取完数据之前，将调用渲染函数，该函数将尝试访问该电影上的数据，如：

movie._embedded['wp:featuredmedia'][0].media_details.sizes.large.source_url

两个快速提示：

使用与期望状态返回的类型相同的内容预填充状态。因此，如果期望电影是对象，则初始状态为
movie:{}
在使用数据呈现元素之前，请确保已加载数据。请设置一个条件，在数据返回之前呈现微调器或加载消息
渲染函数示例：

render() {
  if (Object.keys(movie).length === 0) { // check if movie object is empty
    return <div>Data not loaded</div>;
  } else {
    return (
      ... whatever you had
    );
  }
}

render（）{
if（Object.keys（movie）.length==0）{//检查movie对象是否为空
返回未加载的数据；
}否则{
返回(
…不管你有什么
);
}
}
您是否尝试过console.log（“在componentDidMount中”）在componentDidMount方法中。我会首先将每个组件放到它自己的文件中，这样你就可以很容易地分辨出什么在工作，什么不在工作，这也是最好的做法。@javed我已经尝试过了，控制台.log不会触发，我的控制台中什么都没有。@iceveda06这是我计划下一步做的，但我不确定b布局文件结构的最有效方法yeti检查了你在fetch中有控制台日志。你能把它移到componentDidMount的第一行吗？如果能确认的话。因为componentDidMount会在你的组件安装后调用。你的fetch调用可能有问题。请在网络部分进行检查。所以我要做的是，这将帮助你排除故障并练习好吧，把每个“类”放在它自己的组件中。你还需要使用ReactDOM将你的代码呈现到浏览器中。我在你的代码中看不到这一点，除非它在index.js或其他东西中，并且App.js在其中呈现。很抱歉，我刚刚意识到我丢失了一些代码，非常抱歉，请检查更新的问题。我尝试更改
mOvi:[]
到
电影：{}
这是正确的，但没有帮助。我想添加一个微调器，但我还不知道如何在React中执行此操作。我添加了一个示例，说明如何在等待加载电影对象时避免调用它。太棒了！很高兴为您提供帮助您可能想添加签入组件WillReceiveProps（假设url get被路由器作为道具传入）查看id是否更改。查看以更好地了解react生命周期方法的工作原理。
import React from 'react';
import { Switch, Route, } from "react-router-dom";

import MoviesHub from './MoviesHub';
import MoviePage from './MoviePage';

class Movies extends React.Component {
  render() {
    return (
      <Switch>
        <Route exact path='/movies' component={MoviesHub}/>
        <Route path='/movies/:number' component={MoviePage}/>
      </Switch>
    )
  }
}

export default Movies;

import React from 'react';

class MoviesHub extends React.Component {
  constructor() {
    super();
    this.state = {
      movies: []
    }
  }

  componentDidMount() {
    let dataURL = "http://localhost:8888/SBP/website/wp-json/wp/v2/movies?_embed";
    fetch(dataURL)
      .then(res => res.json())
      .then(res => {
        this.setState({
          movies: res
        })
      })
  }

  render() {
    let movies = this.state.movies.map((movie, index) => {
      return <div key={index}>
      <img src={movie._embedded['wp:featuredmedia'][0].media_details.sizes.large.source_url} alt={movie.title.rendered} />
      <p><strong>Title:</strong> {movie.title.rendered}</p>
      <p><strong>Release Year:</strong> {movie.acf.release_year}</p>
      <p><strong>Rating:</strong> {movie.acf.rating}</p>
      <div><strong>Description:</strong><div dangerouslySetInnerHTML={ {__html: movie.acf.description} } /></div>
      </div>
    });

    return (
      <div>
        <h2>Star Wars Movies</h2>
        {movies}
      </div>
    )
  }
}

export default MoviesHub;

import React from 'react';

class MoviePage extends React.Component {
  constructor() {
    super();
    this.state = {
      movie: []
    }
  }

  componentDidMount() {
    console.log('MoviePage componentDidMount');

    let dataURL = 'http://localhost:8888/SBP/website/wp-json/wp/v2/movies/'+this.props.match.params.number;

    fetch(dataURL)
      .then(results => {
        return results.json();
      })
      .then(data => {
        debugger;

        this.setState({
          movie: data
        })

        console.log("movie", this.state.movie);
      })
  }

  render() {
    let movie = this.state.movie;

    return <div>
        <img src={movie._embedded['wp:featuredmedia'][0].media_details.sizes.large.source_url} alt={movie.title.rendered} />
        <p><strong>Title:</strong> {movie.title.rendered}</p>
        <p><strong>Release Year:</strong> {movie.acf.release_year}</p>
        <p><strong>Rating:</strong> {movie.acf.rating}</p>
        <div><strong>Description:</strong><div dangerouslySetInnerHTML={ {__html: movie.acf.description} } /></div>
      </div>
  }
}

export default MoviePage;

ReactDOM.render(App, document.getElementById('my-root-element'))

movie._embedded['wp:featuredmedia'][0].media_details.sizes.large.source_url

render() {
  if (Object.keys(movie).length === 0) { // check if movie object is empty
    return <div>Data not loaded</div>;
  } else {
    return (
      ... whatever you had
    );
  }
}