Question

我在传递道具时遇到问题（这看起来很荒谬）。我将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);

Answer 1

尝试使用：

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

有前途，您可以使用.then或（async await），但不能同时使用。

顺便说一句，为什么不使用name作为参数而不将其用于函数中？

将props传递给类组件时，返回undefined。传递给功能组件没有问题

1 个答案: