Question

标题是……我可以让控制台回显该数组，但是它不会在导航栏上呈现。

从App.js：

unValidatedUserButtons = ["Search", "Login", "Register"];  

render() {
    return (
      <Layout>
          <Header />
          <Topnav buttons={this.unValidatedUserButtons}/>
      </Layout>
    )
}

到TopNav：

buttonHandlerTnav = (buttonPass) => {
    let newButtons = [...buttonPass];
    this.setState({buttons: newButtons});
    this.setState({needButtons: false});
}

render(){
    if (this.state.needButtons)
    this.buttonHandlerTnav(this.props.buttons);
    return (
        <div className={classes.TopNav}>
                <MenuButton />       
               <AccountButtons 
                buttonPass={this.state.buttons} /> 
        </div>
    );   
}

然后转到AccountButtons：

const buttonHandlerAccount = (newButtons) => { newButtons.map((Button, index)    => {
        return (<button key={index}>{Button}</button>)
    });
}

const accountButtons = (props) => {

    // console.log(props.buttonPass);
    return (
        <div className={classes.AccountButtons}>
        {buttonHandlerAccount(props.buttonPass)}
        </div>
    )
}

如果有人可以帮助我渲染按钮，将非常感谢。

Answer 1

buttonHandlerAccount缺少return语句。

// Button Handler Account.
const buttonHandlerAccount = (newButtons) => {
  return newButtons.map((Button, index) => <button key={index}>{Button}</button>)
}

Answer 2

似乎您的功能组件中缺少return。尝试解决您的问题：

const buttonHandlerAccount = (newButtons) => { 
    return newButtons.map((Button, index)    => {
        return (<button key={index}>{Button}</button>)
    });
}

或者，简称：

const buttonHandlerAccount = (newButtons) => (newButtons.map((Button, index)    => {
        return (<button key={index}>{Button}</button>)
    }))

反应：尝试将数组传递给功能组件，但无法渲染

2 个答案: