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是一个对象，显然可能不如检查相等性那么直接。在render()中，您还想更新onClick以便在其中传递道具：

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

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

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

1 个答案: