时间戳

首页 > 解决方案 > 其他组件中的道具未定义 React

javascript - 其他组件中的道具未定义 React

问题描述

我是 React 的新手，正在尝试使用来自 API 的数据构建示例搜索过滤器。不幸的是，我对这段代码有疑问。

它给我一个错误，，无法读取未定义的属性“过滤器”。

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

孩子

     import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import Data from './Data';

class App extends Component {
  constructor() {
    super();
    this.state = {
      search : " "
    };
  }


updatedSearch(event) {
  this.setState(
    {search : event.target.value.substr(0,15)}
    )
}

  render () {

    console.log(this.props.names)
    let filterednames = this.props.names.filter(
      (name) => {
        return name.toLowerCase().indexOf(this.state.
          search.toLowerCase()) !== -1;
      }
    );
    return (  
        <div className = "App">
        <h1> Users list </h1>
        <Data />
        <input  type = "text" 
          placeholder = "Search by user name" 
          value = {this.state.search}
          onChange = {this.updatedSearch.bind(this)}
        />
        <ol>
            {filterednames.map(name => (
            <li key={name}>{name}</li>
            ))}
        </ol>
        </div>
    )
    
    }



}

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



export default App;

家长

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;

标签： javascriptreactjs

解决方案

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

家长 -

   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>)
   }
}

推荐阅读