javascript - TypeError: Cannot read property 'children' of undefined - Stack Overflow

admin管理员组

文章数量:1314239

I' m building a simply React webapp. In my App.js I have the main ponent that accepts 3 props.(SearchCountry, SearchedCountry and Datas):

import React, { Component } from 'react';
import './App.css';
import NavBar from '../Components/NavBar';
import SideBar from '../Components/SideBar';
import CountryList from '../Components/CountryList';
import Scroll from '../Components/Scroll';
import Main from '../Components/Main';
import SearchCountry from '../Components/SearchCountry';
import SearchedCountry from '../Components/SearchedCountry';
import Datas from '../Components/Datas';

class App extends Component {

  constructor() {
    super();
    this.state = {
      nations: [],
      searchField: '',
      button: false
    }
  }

  onSearchChange = (event) => {
    this.setState({searchField: event.target.value})
  }

  onClickChange = () => {
    this.setState(prevsState => ({
      button: true
    }));
  }

  render() {

    const {nations, searchField, button} = this.state;

    const searchedNation = nations.filter(nation => {
      if(button) {
        return nation.name.toLowerCase().includes(searchField.toLowerCase())
      }
    });

    return (
      <div>
        <div>
          <NavBar/>
        </div>
          <Main>
            <SearchCountry searchChange={this.onSearchChange} clickChange={this.onClickChange}/>
            <SearchedCountry nations={searchedNation}/>
            <Datas/>
          </Main>
          <SideBar>
            <Scroll className='scroll'>
              <CountryList nations={nations}/>
            </Scroll>
          </SideBar>
      </div>
    );
  }

  ponentDidMount() {
     fetch('')
    .then(response => response.json())
    .then(x => this.setState({nations: x}));
  }

  ponentDidUpdate() {
    this.state.button = false;
  }

}

export default App;

This is my Main.js file:

import React from 'react';

const Main = (prop1, prop2, prop3) => {
    return(
        <div role='main' className='dib' style={{width: 'auto'}}>
            <main>
                <div className='container' style={{margin: '10px', border: '2px solid black'}}>
                    <div>
                        {prop1.children}
                    </div>
                    <div>
                        {prop2.children}
                    </div>
                    <div>
                        {prop3.children}
                    </div>
                </div>
            </main>
        </div>
    );
}

export default Main;

And that is the Datas.js:

import React from 'react';

const Datas = () => {
    return(
        <div>
            <h3>Hello world</h3>
        </div>
    );
}

export default Datas;

I don't understand why I get this error, because the Data.js file contains something inside it and everything has been declared. Thanks in advance to anyone who gives me an answer.

I' m building a simply React webapp. In my App.js I have the main ponent that accepts 3 props.(SearchCountry, SearchedCountry and Datas):

import React, { Component } from 'react';
import './App.css';
import NavBar from '../Components/NavBar';
import SideBar from '../Components/SideBar';
import CountryList from '../Components/CountryList';
import Scroll from '../Components/Scroll';
import Main from '../Components/Main';
import SearchCountry from '../Components/SearchCountry';
import SearchedCountry from '../Components/SearchedCountry';
import Datas from '../Components/Datas';

class App extends Component {

  constructor() {
    super();
    this.state = {
      nations: [],
      searchField: '',
      button: false
    }
  }

  onSearchChange = (event) => {
    this.setState({searchField: event.target.value})
  }

  onClickChange = () => {
    this.setState(prevsState => ({
      button: true
    }));
  }

  render() {

    const {nations, searchField, button} = this.state;

    const searchedNation = nations.filter(nation => {
      if(button) {
        return nation.name.toLowerCase().includes(searchField.toLowerCase())
      }
    });

    return (
      <div>
        <div>
          <NavBar/>
        </div>
          <Main>
            <SearchCountry searchChange={this.onSearchChange} clickChange={this.onClickChange}/>
            <SearchedCountry nations={searchedNation}/>
            <Datas/>
          </Main>
          <SideBar>
            <Scroll className='scroll'>
              <CountryList nations={nations}/>
            </Scroll>
          </SideBar>
      </div>
    );
  }

  ponentDidMount() {
     fetch('https://restcountries.eu/rest/v2/all')
    .then(response => response.json())
    .then(x => this.setState({nations: x}));
  }

  ponentDidUpdate() {
    this.state.button = false;
  }

}

export default App;

This is my Main.js file:

import React from 'react';

const Main = (prop1, prop2, prop3) => {
    return(
        <div role='main' className='dib' style={{width: 'auto'}}>
            <main>
                <div className='container' style={{margin: '10px', border: '2px solid black'}}>
                    <div>
                        {prop1.children}
                    </div>
                    <div>
                        {prop2.children}
                    </div>
                    <div>
                        {prop3.children}
                    </div>
                </div>
            </main>
        </div>
    );
}

export default Main;

And that is the Datas.js:

import React from 'react';

const Datas = () => {
    return(
        <div>
            <h3>Hello world</h3>
        </div>
    );
}

export default Datas;

I don't understand why I get this error, because the Data.js file contains something inside it and everything has been declared. Thanks in advance to anyone who gives me an answer.

• javascript
• reactjs

Share Improve this question Follow edited Jun 30, 2021 at 10:32 Snirka 59811 gold badge55 silver badges1919 bronze badges asked Jun 29, 2021 at 17:41 Saverio RandazzoSaverio Randazzo 28622 gold badges88 silver badges2323 bronze badges 3

• You don't pass any props to Main in the App ponent. See here. – Snirka Commented Jun 29, 2021 at 17:55
• You can pass a ponent as props, but not like that. See if this helps. – sallf Commented Jun 29, 2021 at 17:55
• props.children is an array, you don't use prop1.children, prop2.children ... you can use props.children[0] and etc. – zb22 Commented Jun 29, 2021 at 17:55

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 4

So on Main.js, when you are using this kinda of syntax (functional ponent) the way you are getting the props is not correct and not only that, you can only have one children per ponent.

So first things first, you can correct this part in many different ways, you can either use destructuring or with only one parameter

const Main = (prop1, prop2, prop3) => { ... }

Option 1

const Main = ({ prop1, prop2, prop3, children }) => { ... }

Option 2

const Main = (props) => { 
  console.log(props.props1)
  console.log(props.props2)
  console.log(props.children)
  ...
}

But to your case, on the App.js all ponents/tags inside the Main ponent, they are all one children, so instead of what you are doing, you should do

// Main.js
...
<div className='container' style={{margin: '10px', border: '2px solid black'}}>
    {props.children}
    // OR if you are using destructuring
    {children}
</div>

That way you are getting everything inside <Main> ... </Main> you be rendered inside the <div className="container ...>

本文标签： javascriptTypeError Cannot read property 39children39 of undefinedStack Overflow