反应构造函数 var undefined （无法读取未定义的）

Question

新的反应并被困在下面；我尝试了几种不同的方式来编写它，结果总是在constructor(props) 中的第一个听写“fruit”是undefined 时出错。我只是想创建一个有效的下拉选择，在反应中捕获选定的值。

文件一，/App.js

import React from 'react'
import {ReactExample} from './index'
import './App.css'

class BooksApp extends React.Component {

  constructor(props) {
    super(props);
    this.state = { fruit: props.item.fruit }; <-------- errors
  }

  handleChange = (event) => {
    this.setState({ [event.target.name]: event.target.value });
  }

  saveItem = () => {
    const item = {};
    item.fruit = this.state.fruit;
  }

  render() {
    return (
      <div className="app">
        /* ...other HTML etc*/
                    <ol className="books-grid">
                      <li>
                        <div className="book">
                          <div className="book-top">
                            <div className="book-cover" style={{ width: 128, height: 193, backgroundImage: 'url("workingAPIURL")' }}></div>
                            <div className="book-shelf-changer">
                   
                                <ReactExample name="fruit" value={this.state.fruit} handleChange={this.handleChange} />

                            </div>
                      </div>
                    </div>
                  </li></ol></div>
        /* ...other HTML etc*/

}

export default BooksApp

第二个文件，index.js

import React from 'react'
import ReactDOM from 'react-dom'
import App from './App'
import './index.css'

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

export const ReactExample = ({ name, value, handleChange }) => (
    <select name={name} value={value} onChange={handleChange}>
        <option value="move" disabled>Move to...</option>
        <option value="currentlyReading">Currently Reading</option>
        <option value="wantToRead">Want to Read</option>
        <option value="read">Read</option>
        <option value="none">None</option>
  </select>
  )

错误：

Answer 1

您还没有在 index.js 中为 App 组件定义任何道具。这可以通过这种方式完成：

<App item={ fruit: 'yourValue' }/>

如果您不想将值作为道具传递，您可以像这样在构造函数中简单地初始化状态：

constructor(props) {
    super(props);
    this.state = { fruit: 'yourValue' };
  }

我还建议以相同的方式命名组件及其默认导入。在 index.js 中将 BooksApp 作为 App 导入有点令人困惑。