Javascript 尝试使用提取填充选项dropdow组件

我正在研究如何动态填充已设置的dropdown（）组件，但我很难让它正常工作。类别的数据是从我在后端设置的Rails Api中提取的。我还收到一条“TypeError:this.props.state is undefined”消息，如果这有助于解决我的问题

到目前为止，在我的RecipeInput表单组件中，这是我到目前为止使用下拉列表呈现的内容： //我拿出了一些事件处理程序，试图让这个解释直截了当

import React, { Component } from 'react'
import  Catagories  from './Catagories.js'

class RecipeInput extends Component{
    constructor(props){
        super(props)

        this.state = {
            catagories: [],
            name:'',
            ingredients: '',
            chef_name: '',
            origin: '',
        }

        
    }

    

    componentDidMount(){
        let initialCats = [];
        const BASE_URL = `http://localhost:10524`
        const CATAGOREIS_URL =`${BASE_URL}/catagories`
        fetch(CATAGOREIS_URL)
        .then(resp => resp.json())
        .then(data => {
            initialCats = data.results.map((catagory) => {
                return catagory
            })
                this.setState({
                    catagories: initialCats,
                })   
            });
    }

    

    
  

     render(){
        return(
            <div>
                <form onSubmit={this.handleSubmit}>
                    <Catagories catagories={this.state.catagories}/>
                    
                    <input value='submit' type='submit'/>
                </form>
            </div>
        )
    }


 


}

export default RecipeInput

import React，{Component}来自“React”
从“./Catagories.js”导入类别
类RecipeInput扩展组件{
建造师（道具）{
超级（道具）
此.state={
类别：[]，
名称：“”，
成分：''，
厨师长姓名：''，
来源：''，
}
}
componentDidMount（）{
设initialCats=[]；
常量基本URL=`http://localhost:10524`
const catagories_URL=`${BASE_URL}/catagories`
获取（分类URL）
.then（resp=>resp.json（））
。然后（数据=>{
initialCats=data.results.map（（分类）=>{
返回分类
})
这是我的国家({
分类：猫，
})   
});
}
render（）{
返回(
)
}
}
导出默认RecipeInput

这是我的实际分类部分：

import React, { Component } from 'react'

class Catagories extends Component{
    constructor(){
        super()
    }

    render(){
        let catagories = this.props.state.catagories
        let optionItems = catagories.map((catagory,index) =>
            <option key={index}>{catagory.name}</option>
        )


        return (
            <div>
                <select>
                    {optionItems}
                </select>
            </div>
        )
    }
}

export default Catagories

import React，{Component}来自“React”
类类别扩展了组件{
构造函数（）{
超级（）
}
render（）{
让类别=this.props.state.catagories
让optionItems=catagories.map（（catagority，index）=>
{类别名称}
)
返回(
{optionItems}
)
}
}
导出默认类别

---

谁能指出我的下拉列表没有根据提供的代码填充？

使用

this.props.catagories

而不是

this.props.state.catagories
使用
this.props.catagories
而不是
this.props.state.catagories