Javascript 向类传递道具时，组件返回未定义。但是传递到函数组件没有问题

我在传递道具方面有问题（这似乎很可笑）。我将islIsOn、islName、maintanceIsOn、maintanceName道具毫无问题地传递给函数组件，但现在我有了类组件，它返回未定义的属性，同时我以相同的方式传递它（使用“this”tho）

从道具数据库返回的屏幕截图：

代码：

 //DownLayout.js     Parent
 export class DownLayout extends Component {
 state = {
 bns: []
 };

 getBns = async name => {
  await axios.get(api/bns/).then(response => {
   this.setState({
    bns: response.data
   });
  });
};

 mapStateToComponent = () => {
  const { bns } = this.state;
   const components = bns.map((item, index) => {
    return (
      <Col key={index}>
       <p style={machineName}>{item.bnsName}</p>
        <Machinewrapper
        islName={item.islName}
        islIsOn={item.islIsOn}
        maintanceName={item.maintanceName}
        maintanceIsOn={item.maintanceIsOn}
        aso={item.aso}
        dropdownName={item.dropdownName}
        autosearchName={item.autosearchName}
        autosearchValue={item.autosearchValue}
        commentName={item.commentName}
        commentValue={item.commentValue}
      />
    </Col>
    );
  });
  return components;
};

 componentDidMount() {
  this.getBns("sdsd");
   }

  render() {
  console.log(this.mapStateToComponent());
   const { bns } = this.state;
  return (
     <Container md={12} style={{ margin: "0px", maxWidth: "100%" }}>
      <Row
        style={{
        display: "flex",
        flexFlow: "row",
        flexWrap: "wrap"
       }}
     >
      {this.mapStateToComponent()}

    </Row>
    </Container>


 //Machinewrapper.js
<Islbutton islName={this.props.islName} islIsOn={this.props.islIsOn}/>
<Aso aso={this.props.aso} dropdownName={this.props.dropdownName}/>


//Aso.js
  class Aso extends Component {
    constructor(props) {
    super(props);

   this.state = {
   items: this.props.items || [],
   showItems: false,
   selectedItem: this.props.items && this.props.items[0],
   role: "",
   dropdownName: this.props.dropdownName
    };
   }

  componentDidMount() {
   if (this.props.auth.user) {
   this.setState({ role: this.props.auth.user.role });
 }
 }

checkRole = role => {
   if (role === "Menager" || role === "Technolog") {
     return true;
  } else {
    return false;
   }
   };

  dropDown = () => {
  if (this.checkRole(this.state.role)) {
    this.setState(prevState => ({
    showItems: !prevState.showItems
     }));
  }
 };

  selectItem = item =>
  this.setState({
    selectedItem: item,
   showItems: false
  });

render() {
console.log(this.dropdownName)
return (
   <div style={{ display: "flex", justifyContent: "center", width: "100%" 
  }}>
    <div className="dropdown" style={{ width: this.props.width || 195 }}>
      <div className="select-box--container">
        <div className="select-box--selected-item">
          {this.state.selectedItem.value}
        </div>
        <div className="select-box--arrow" onClick={this.dropDown}>
          <span
            className={`${
              this.state.showItems
                ? "select-box--arrow-up"
                : "select-box--arrow-down"
            }`}
          />
        </div>
        <div
          style={{ display: this.state.showItems ? "block" : "none" }}
          className="select-box--items"
        >
          {this.state.items.map(item => (
            <div
              key={item.id}
              onClick={() => this.selectItem(item)}
              className={this.state.selectedItem === item ? "selected" : 
 ""}
              >
              {item.value}
            </div>
          ))}
        </div>
      </div>
    </div>
  </div>
    );
   }
  }

  Aso.propTypes = {
  auth: propTypes.object.isRequired
 };

 const mapStateToProps = state => ({
  auth: state.auth
 });

export default connect(mapStateToProps, {})(Aso);

//DownLayout.js父级
导出类布局扩展组件{
状态={
bns:[]
};
getBns=异步名称=>{
等待axios.get（api/bns/）。然后（响应=>{
这是我的国家({
bns:response.data
});
});
};
mapStateToComponent=（）=>{
const{bns}=this.state；
常量组件=bns.map（（项目，索引）=>{
返回(
{item.bnsName}
);
});
返回组件；
};
componentDidMount（）{
本文件为getBns（“sdsd”）；
}
render（）{
log（this.mapstatetomponent（））；
const{bns}=this.state；
返回(
{this.mapStateToComponent（）}
//Machinewrapper.js
//Aso.js
类Aso扩展组件{
建造师（道具）{
超级（道具）；
此.state={
项目：this.props.items | |[]，
展示项目：假，
选择编辑项：this.props.items&&this.props.items[0]，
角色：“，
dropdownName:this.props.dropdownName
};
}
componentDidMount（）{
if（this.props.auth.user）{
this.setState（{role:this.props.auth.user.role}）；
}
}
checkRole=角色=>{
如果（角色==“动物园”| |角色==“技术日志”）{
返回true；
}否则{
返回false；
}
};
下拉菜单=（）=>{
if（this.checkRole（this.state.role））{
this.setState（prevState=>({
showItems:！prevState.showItems
}));
}
};
selectItem=item=>
这是我的国家({
选择编辑项：项目，
展示项目：假
});
render（）{
console.log（this.dropdownName）
返回(
{this.state.selectedItem.value}
{this.state.items.map（item=>(
this.selectItem（项目）}
className={this.state.selectedItem===项目？“已选定”：
""}
>
{item.value}
))}
);
}
}
Aso.propTypes={
auth:propTypes.object.isRequired
};
常量mapStateToProps=状态=>({
auth:state.auth
});
导出默认连接（MapStateTops，{}）（Aso）；

尝试使用：

 getBns = async name => {
  const response = await axios.get(api/bns/);
  this.setState({bns: response.data});
};

有了promise，您可以使用

.then

或（

async await

），而不是两者都使用

---

顺便说一句，为什么您使用

name

作为参数而不在函数中使用它？

添加您的父级和子级完整代码我怀疑您的道具在安装子组件后会更新，但是您初始化了它一次，所以子组件的状态可能仍然未定义。但是函数组件没有问题，怎么会这样呢？瘦的如果getBns函数运行良好，我可以毫无问题地将道具传递给功能组件，如果我尝试将道具传递给类组件，问题就开始了，因为它总是返回未定义的