无法将反应道具价值传递给另一个组件

Question

我在将道具传递到另一个组件时遇到了麻烦。此代码来自我的App组件，由onClick触发

 addServer() {
    let serverArr = ['Server 1','Server 2'];
    serverArr.push(this.state.serverName);
    return (
        <ServerList server={serverArr}/> // Here i am passing the array as prop
      )

  }

这是我要使用道具的组件中的代码，我试图显示传递的道具

export class ServerList extends React.Component {
    render(){
        let server = this.props.server.map((item, index) => {
           return <li key={index}> {item} </li>;
        })
        return (
                <div className="container-server">
                <ul> {server} </ul>
                </div>
        )
   }
}

Answer 1

我不确定您的情况，但我猜是，因为您正在使用来对数组进行变异

array.push()  

你应该打电话

 this.forceUpdate() 

用于重新渲染组件的函数，所以只需尝试一下

addServer() {
let serverArr = ['Server 1','Server 2'];
serverArr.push(this.state.serverName);
this.forceUpdate();
return (
    <ServerList server={serverArr}/> // Here i am passing the array as prop
  )  }

Answer 2

什么是价值this.state.serverName上serverArr.push行？ 在该行之前，请Console.log this.state.serverName 。

还在serverArr.push行之后的console.log serverArr 。

然后let server行之后的console.log server 。

在this.props.server let sever连接之前，还应该console.log this.props.server 。

进行这些检查后，您应该查明错误所在。

最后，实际错误是什么。 是在控制台中编写了某些内容，还是看不到组件，或者组件呈现的异常？

编辑：您应该在serverArr置于state AppComponent ，然后进行渲染。 例如：

class AppComponent extends React.Component {

    constructor(props){
         super(props);
         this.state = {serverArr: ['Server 1', 'Server2']};
         this.addServer = this.addServer.bind(this);
    }

    function addServer() {
    }

    render(){
        return (
              <div>
                <ServerList server={serverArr}/>
                <button onClick={this.addServer}>Add</button>
              </div>
        );
    }
}