無法將反應道具價值傳遞給另一個組件

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