React - 道具不会在整个组件中更新相同

Question

解决了！

componentDidUpdate() 是我需要的！感谢您的帮助！

这将是一个来自真正 React 新手的问题。

我遇到问题的组件的想法是创建一个行为类似于在线商店“购买”按钮的按钮 - 单击时，该项目被添加到“购物篮”并且按钮被禁用，但是当被删除时, 项目从列表中删除，按钮应该重新启用。

在最后一部分我有一个问题。我决定将启用/禁用每个按钮，条件是它是否在 this.props.chosenModulesNames 列表中。如果是我正在更新一个状态。它可以很好地添加项目到列表中，但删除对我来说有点困难。

到目前为止，我发现 this.props.chosenModules 正在更新渲染方法中的动态，但不是在那之前。我怎么解决这个问题？ （也许生命周期方法就是答案？）

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;

编辑： codeandbox.io/s/pmqlwy2w5q -> 这可能更有帮助。主要问题是，从“购物清单”中删除元素后，我希望重新启用与其元素相关的按钮。我认为“addModule.jsx”组件在这里至关重要。我还记录了一个我愿意在条件语句中使用的道具：渲染方法中的一个，这对我很有用，因为它是动态的；以及 handleAddModuleToList 方法中的相同道具，它与第一个不同。有什么想法吗？

Answer 1

您可能需要检查componentWillReceiveProps 以查看chosenModulesNames 是否已更新。如果您的 AddModule 组件在每次从篮子中添加或删除某些东西时都没有重新渲染，那么除非您专门检查它们，否则它永远不会知道道具更新。您需要执行以下操作：

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

请注意，我也将 nextProps 传递给函数。我建议您将 props 作为参数传递给 handleAddModuleToList func，因为您不会获得最新的 props，而只是在函数内部访问 props。当您比较 this.props 与 nextProps 时，如果 chosenModulesNames 是一个对象，它显然可能不像检查相等性那样简单。在 render() 中，您还想更新 onClick 以在那里传递道具：

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

然后在您的函数中删除对this.props 的引用，以便它引用您现在传递给函数的 props 参数。