Javascript 其他组件中的道具未定义

我是React的新手，尝试用API中的数据构建一个示例搜索过滤器。不幸的是，我有这个代码的问题

出现错误，无法读取未定义的属性“filter”。

在我看来，子组件并没有从父组件获得道具，但我在代码中声明并导入了它。 我已经尝试了所有我在互联网上找到的东西，但没有任何帮助。有人能帮我理解我做错了什么吗

孩子

import React，{Component}来自'React'；
从“react dom”导入react dom；
从“./Data”导入数据；
类应用程序扩展组件{
构造函数（）{
超级（）；
此.state={
搜索：“
};
}
更新的搜索（事件）{
这是我的国家(
{search:event.target.value.substr（0,15）}
)
}
渲染（）{
console.log（this.props.names）
让filterednames=this.props.names.filter(
（姓名）=>{
返回name.toLowerCase（）.indexOf（this.state）。
search.toLowerCase（））！==-1；
}
);
报税表（
用户列表
{filterednames.map（名称=>(
{name}
))}
)
}
}
ReactDOM.render（，document.getElementById（'root'））；
导出默认应用程序；

母公司

import React, { Component } from 'react';
import App from './index';



class Data extends Component {
    constructor(props) {
      super(props);
      this.state = {
        names : [],
      }
    }

  
    componentDidMount() {
        fetch('https://jsonplaceholder.typicode.com/users')
          //Response
        .then(response => response.json())
        .then(output => {
           let data = output;
      
        //names in array
        let listaimion = [];

        for (let index = 0; index < data.length; index++) {
          listaimion.push(data[index].name)
         }
      
      this.setState({names : listaimion})
      })
    }

     
     render () {  
       return (
         <div className = "Data">
            <App  names = {this.state.names} /> 
         </div>
       )
     }
}
    
export default Data;

import React，{Component}来自'React'；
从“./index”导入应用程序；
类数据扩展组件{
建造师（道具）{
超级（道具）；
此.state={
姓名：[]，
}
}
componentDidMount（）{
取（'https://jsonplaceholder.typicode.com/users')
//回应
.then（response=>response.json（））
。然后（输出=>{
让数据=输出；
//数组中的名称
设listaimon=[]；
for（让index=0；index组件应该是父组件，这是你的州应该居住的地方。然后你将
这个.state.names
从
传递到
App
呈现方法中的
App
中。你不应该在
数据中导入
App
-
App
应该呈现
数据

// App.js
class App extends Component {
  state = {
    names: []
  }
  componentDidMount(){
    // fetch data and when it's done use this.setState({ names: data })
  }
  render() {
    return <Data names={this.state.names}/>
  }
}

在父组件中，需要声明应用程序。此外，应用程序看起来像是应用程序的入口点。看起来，您可能在这里混淆了子组件和父组件

母公司-

   import React, { Component } from 'react';
   import ReactDOM from 'react-dom';
   import Data from './Data';
    
   class App extends Component() {
   constructor() {
      this.state = {
        names : [],
      }
   }

  
    componentDidMount() {
        fetch('https://jsonplaceholder.typicode.com/users')
          //Response
        .then(response => response.json())
        .then(output => {
        let data = output;
        let listaimion = [];
        for (let index = 0; index < data.length; index++) {
          listaimion.push(data[index].name)
        }      
        this.setState({names : listaimion});
      });
    }

     
     render () {
       return (
         <div className = "Data">
          <Data  names = {this.state.names} /> 
         </div>       
       )
     }
    }

ReactDOM.render(<App/>,document.getElementById('root'));
export default App;

import React，{Component}来自'React'；
从“react dom”导入react dom；
从“./Data”导入数据；
类应用程序扩展组件（）{
构造函数（）{
此.state={
姓名：[]，
}
}
componentDidMount（）{
取（'https://jsonplaceholder.typicode.com/users')
//回应
.then（response=>response.json（））
。然后（输出=>{
让数据=输出；
设listaimon=[]；
for（让index=0；index

孩子

import React，{Component}来自'React'；
类数据扩展组件{
建造师（道具）{
超级（道具）；
}
render（）{
让filterednames=this.props.names.filter（（name）=>{
返回name.toLowerCase（）.indexOf（this.state）。
search.toLowerCase（））！==-1；
}
);
返回（{filterednames.join（'，）}）
}
}
我甚至没有在你的应用程序组件中看到数据组件。它应该在应用程序的呈现中被称为：
。它真的帮助我发现了我做错了什么，谢谢你的时间。没问题。如果你觉得有帮助，请进行投票。另外，你可以参考这个youtube。它将帮助你更好地理解React概念。它真的很有帮助让我知道我做错了什么，谢谢你的时间。
// Data.js
const Data = (props) => {
  return props.names.map(() => {...your map function})
}

   import React, { Component } from 'react';
   import ReactDOM from 'react-dom';
   import Data from './Data';
    
   class App extends Component() {
   constructor() {
      this.state = {
        names : [],
      }
   }

  
    componentDidMount() {
        fetch('https://jsonplaceholder.typicode.com/users')
          //Response
        .then(response => response.json())
        .then(output => {
        let data = output;
        let listaimion = [];
        for (let index = 0; index < data.length; index++) {
          listaimion.push(data[index].name)
        }      
        this.setState({names : listaimion});
      });
    }

     
     render () {
       return (
         <div className = "Data">
          <Data  names = {this.state.names} /> 
         </div>       
       )
     }
    }

ReactDOM.render(<App/>,document.getElementById('root'));
export default App;

import React, { Component } from 'react';

class Data extends Component {
    constructor(props) {
      super(props);
    }

    render() {
      let filterednames = this.props.names.filter((name) => {
         return name.toLowerCase().indexOf(this.state.
           search.toLowerCase()) !== -1;
         }
      );
      return (<div>{filterednames.join(',')}</div>)
   }
}