反应不将道具传递给组件

Posted 2023-02-23

【中文标题】反应不将道具传递给组件

【英文标题】：React not passing props to component

【发布时间】：2019-07-29 17:51:37

【问题描述】：

我刚刚开始学习 React 并尝试将 props 传递给子组件，正如我在许多教程和react docs 中看到的那样。 但是我看不到在我的子组件中传递的任何道具。 我在 Chrome 中有 installed React Developer 工具

我的代码如下：

App.js

import React,  Component  from 'react';
import './App.css';
import Movies from './Components/Movies';
import GetMovies from './Data/MoviesServie';

class App extends Component 
  constructor() 
    super();
    this.state = 
      movies: []
    ;
  

  componentDidMount() 
    const movies = [...GetMovies()];
    this.setState( movies );  // 1. setting state
  

  render() 
    return <Movies movie=this.state.movie />; // NOT WORKING
  


export default App;

我也尝试过控制台日志记录，发现以下内容是按顺序调用的

构造函数调用（显然） 渲染 componentDidMound // 我在这里设置状态，但它仍然在记录空白数组 渲染（再次渲染状态设置为对象数组）

但是当我在<Movies /> 组件中看到道具时，我没有看到任何东西。 那里的道具为空/空白。

我不知道是什么问题，每个教程都有方法，我在这里使用。

【问题讨论】：

你传递的是 movie 而不是 movies。

那一个字母错误...

【参考方案1】：

你错过了一封信

更改return <Movies movie=this.state.movie />;

致return <Movies movie=this.state.movies />;

【讨论】：

非常感谢！你解决了我的问题。一个非常愚蠢的错误虽然:)

没有愚蠢的错误，每个人都会犯错误

我也有同样的问题。我已经检查了拼写，一切都正确，但它仍然传递空字符串而不是我的预期值。这只是 Hello World 页面，我是从 ReactDOM.render() 传递过来的。为什么它不传递给ui？ jsfiddle.net/y1cmgt0e/1