reactjs - 反应未定义的道具问题

Question

您好，我对我的代码有疑问。

在 SearchBar.js 中，我得到了错误，这是未定义的道具。我有两个问题，如果未定义为什么 if 语句不调用，我不明白为什么 props 未定义，因为我认为我将 props 从父组件正确传递到子组件（SearchBar.js）

在此处输入代码

import React from 'react';
import ReactDOM from 'react-dom';

import SearchBar from './components/SearchBar';
import ShopList from './components/ShopList';

class App extends React.Component {

    state ={ title: [], text: ''}

    componentDidMount(){
        this.setState({title:["javascript","react","redux","c++","java"]})
    }

    handleSubmit = (e) =>{
        e.preventDefault();
    }

    handleChange = (e) => {
        this.setState({text: e.target.value})
    }

    render() {
        return (
            <div>
            <div className="split left">
                <div className="centered">
                    <SearchBar handleSubmit={this.handleSubmit} handleChange={this.handleChange} userinput={this.state.text}/>
                    <ShopList shops={this.state.title}/>
                </div>
            </div>
            <div className="split right">
                <div className="centered">

                </div>
            </div>
            </div>
        )
    }
}

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


SearchBar.js

import React from 'react';

class SearchBar extends React.Component{

constructor(props){
    super(props);
}

render(){
    if(!this.props){
        return <div>Loding..</div>
    }
    return (
        <form className="ui form" onSubmit={this.props.handleSubmit}>
            <div className="inline field">                
                <input onChange={this.props.handleChange} className="myinput" type="text" style={{width: '85%'}} value={props.userinput}/>
                <button className="ui primary button"  type="submit">button</button>
            </div>
        </form>
    )
}
}

export default SearchBar;

标签： reactjs