React-道具不會在整個組件中相同地更新

Question

解決了！

componentDidUpdate（）是我所需要的！ 感謝幫助！

這將是真正的React新手提出的問題。

我遇到問題的組件的想法是創建一個行為類似於在線商店的“購買”按鈕的按鈕-單擊后，該項目將添加到“購物籃”中，並且該按鈕被禁用，但是當刪除時，該項目為從列表中刪除，然后應啟用按鈕。

對於最后一部分，我有一個問題。 我決定，無論是否在this.props.chosenModulesNames列表上，都將啟用/禁用每個按鈕。 如果是，我正在更新狀態。 將項目添加到列表中效果很好，但是對我來說刪除起來有點困難。

到目前為止，我發現this.props.chosenModules正在render方法中動態更新，但是沒有更新過。 我怎么解決這個問題？ （也許生命周期方法是答案？）

import React, { Component } from "react";
import { Button } from "react-bootstrap";

class AddModule extends Component {
  state = {
    disabled: false,
    moduleDisplayInfo: "Add module",
    chosenModulesNames: this.props.chosenModulesNames
  };

  constructor(props) {
    super(props);
    this.handleAddModuleToList = this.handleAddModuleToList.bind(this);
  }

  handleAddModuleToList() {
    {
      /*In here this.props.chosenModulesNames does not update dynamicly
            */
      //console.log(this.props.chosenModulesNames);
    }
    this.props.moveModuleNameUpToSingleModule(this.props.name);
    this.props.chosenModulesNames.includes(this.props.name)
      ? this.setState({
          disabled: true,
          moduleDisplayInfo: "Added"
        })
      : this.setState({
          disabled: false,
          moduleDisplayInfo: "Add module!"
        });
  }
  render() {
    return (
      <div>
        {/*Here this.props.chosenModulesNames are actual and dynamic updated*/}
        {console.log(this.props.chosenModulesNames)}

        <Button
          disabled={this.state.disabled}
          bsStyle="primary"
          onClick={this.handleAddModuleToList}
        >
          {this.state.moduleDisplayInfo}
        </Button>
      </div>
    );
  }
}

export default AddModule;

編輯：codesandbox.io/s/pmqlwy2w5q->這可能會更有幫助。 主要問題是，從“購物清單”中刪除了元素后，我希望啟用與該元素相關的按鈕。 我認為'addModule.jsx'組件在這里至關重要。 我還記錄了一個我願意在條件語句中使用的道具：一個在render方法中，因為它是動態的，對我來說將很有用； 和handleAddModuleToList方法中的相同道具，它與第一個道具的工作方式不同。 任何想法？

Answer 1

您可能需要在componentWillReceiveProps進行檢查，以查看chosenModulesNames是否已更新。 如果您的AddModule組件在每次添加或刪除購物籃時都沒有重新呈現，除非您專門檢查它們，否則它將永遠不會知道prop更新。 您將需要執行以下操作：

componentWillReceiveProps(nextProps) {
    if (this.props.chosenModulesNames !== nextProps.chosenModulesNames) {
        this.handleAddModuleToList(nextProps);
    }
}

注意，我也將nextProps傳遞給函數。 我建議您將props作為參數傳遞給handleAddModuleToList函數，因為您將不會獲得最新的props，而只是在函數內部訪問props。 當您比較this.props與nextProps ，如果chosenModulesNames是一個對象，則顯然不如檢查相等性那么chosenModulesNames 。 在render()您還想更新onClick以便在其中傳遞道具：

    <Button
      disabled={this.state.disabled}
      bsStyle="primary"
      onClick={this.handleAddModuleToList(this.props)}
    >

然后在函數中刪除對this.props的引用，以便它引用您現在傳遞到函數中的props參數。