javascript - react : Trying to pass an array to a functional component, 但它不会呈现

Question

正如标题所说...我可以让控制台回显数组，但它不会呈现在我的导航栏上。

来自 App.js:

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

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

到顶部导航:

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>)
}