我是 reactjs 的新手，我正在嘗試學(xué)習(xí) React-js。我想建立依賴下拉菜單。如果我選擇類型小說(shuō)，它應(yīng)該顯示小說(shuō)類型的書(shū)籍?，F(xiàn)在所有這些都是硬編碼的，我還沒(méi)有將它鏈接到數(shù)據(jù)庫(kù)/后端。我搜索了一些東西并想出了這個(gè)，但它不能正常工作。class Dropdown extends Component {  constructor(props) {    super(props);    this.state = {      Genres: [],      Books: [],      selectedGenre: "--Choose Genre--",      selectedBook: "--Choose Book--",    };    this.ChangeGenre = this.ChangeGenre.bind(this);    this.ChangeBook = this.ChangeBook.bind(this);  }  componentDidMount() {    this.setState({      Genres: [        { name: "Fiction", Books: ["GOT", "LOTR", "Harry Potter"] },        { name: "Murder", Books: ["Dragon", "Tattoo", "Girl"] },        { name: "Thriller", Books: ["Angel", "Lost Symbol", "Davinci"] },      ],    });  }  ChangeGenre(event) {    this.setState({      selectedGenre: event.target.value,    });    this.setState({      Books: this.state.Genres.find((b) => b.name === event.target.value).Books,    });  }  ChangeBook(e) {    this.setState({ selectedBook: e.target.value });    const stats = this.state.Genres.find(      (g) => g.name === this.state.selectedGenre    ).Books;    this.setState({      Books: stats.find((stat) => stat === e.target.value).Books,    });  }  render() {    return (      <div id="container">        <h2>Cascading or Dependent Dropdown using React</h2>        <div>          <label>Genre</label>          <select            placeholder="Genre"            value={this.state.selectedGenre}            onChange={this.ChangeGenre}          >            <option>--Choose Genre--</option>            {this.state.Genres.map((e, key) => {              return <option key={key}>{e.name}</option>;            })}          </select>        </div>Books 下拉列表不顯示任何書(shū)籍，并且單擊任何選項(xiàng)都會(huì)引發(fā)錯(cuò)誤 cannot read 'Books' of Undefined。