当 props 改变时，react 不会重新渲染组件

Question

我正在更改我的道具的类属性，然后我希望组件使用新类重新呈现，但这不起作用。我已经阅读了有关 shouldComponentUpdate 方法的信息，但该方法永远不会被调用。

  var ReactDOM = require('react-dom');
  var React = require('react');

   class Button extends React.Component {
constructor(props) {
    super(props);
    console.log("BUTTON")
    console.log(props);
    var options = props.options;
}
componentWillMount () {
    var defaultFeatureOptionId = this.props.feature.DefaultFeatureOptionId;
    this.props.options.forEach((option) => {
        var classes = "";
        if (option.Description.length > 10) {
            classes = "option-button big-button hidden";
        } else {
            classes = "option-button small-button hidden";
        }
        if (option.Id === defaultFeatureOptionId) {
            classes = classes.replace("hidden", " selected");
            option.selected = true;
        }
        option.class = classes;
    });
}
shouldComponentUpdate(props) {
    console.log("UPDATE");
}
toggleDropdown(option, options) {
    console.log(option);
    console.log(options)

    option.selected = !option.selected;
    options.forEach((opt) => {
        if (option.Id !== opt.Id) {
            opt.class = opt.class.replace("hidden", "");
        }
        else if(option.Id === opt.Id && option.selected) {
            opt.class = opt.class.replace("", "selected");
        } 
    });        
}
render() {
    if (this.props.options) {
        return (<div> {
            this.props.options.map((option) => {
                return <div className={ option.class } key={option.Id}>
                    <div> {option.Description}</div>
                    <img className="option-image" src={option.ImageUrl}></img>
                    <i className="fa fa-chevron-down" aria-hidden="true" onClick={() => this.toggleDropdown(option, this.props.options) }></i>
                    </div>
            })
        }

        </div>
        )
    }     
    else {
        return <div>No options defined</div>
    }
}
 }

 module.exports = Button;

我已经阅读了很多关于 shouldComponentUpdate 和 componentWillReceiveProps 的不同内容，但我似乎还缺少其他内容。

Answer 1

您不能直接更改道具，您可以调用父函数来更改传递给组件的道具，或者在您创建的本地副本中更改它们。 shouldComponentUpdate 仅在状态直接更改或从道具更改时调用，您无需执行任何操作，仅修改本地副本，因此不会触发更改

做一些类似的事情

var ReactDOM = require('react-dom');
var React = require('react');

   class Button extends React.Component {
constructor(props) {
    super(props);
    console.log(props);
    this.state = {options = props.options};
}
componentWillRecieveProps(nextProps) {
  if(nextProps.options !== this.props.options) {
    this.setState({options: nextProps.options})
  }
}
componentWillMount () {
    var defaultFeatureOptionId = this.props.feature.DefaultFeatureOptionId;
    var options = [...this.state.options]
    options.forEach((option) => {
        var classes = "";
        if (option.Description.length > 10) {
            classes = "option-button big-button hidden";
        } else {
            classes = "option-button small-button hidden";
        }
        if (option.Id === defaultFeatureOptionId) {
            classes = classes.replace("hidden", " selected");
            option.selected = true;
        }
        option.class = classes;
    });
    this.setState({options})
}
shouldComponentUpdate(props) {
    console.log("UPDATE");
}
toggleDropdown(index) {

    var options = [...this.state.options];
    var options = options[index];
    option.selected = !option.selected;
    options.forEach((opt) => {
        if (option.Id !== opt.Id) {
            opt.class = opt.class.replace("hidden", "");
        }
        else if(option.Id === opt.Id && option.selected) {
            opt.class = opt.class.replace("", "selected");
        } 
    });   
    this.setState({options})
}
render() {
    if (this.state.options) {
        return (<div> {
            this.state.options.map((option, index) => {
                return <div className={ option.class } key={option.Id}>
                    <div> {option.Description}</div>
                    <img className="option-image" src={option.ImageUrl}></img>
                    <i className="fa fa-chevron-down" aria-hidden="true" onClick={() => this.toggleDropdown(index) }></i>
                    </div>
            })
        }

        </div>
        )
    }     
    else {
        return <div>No options defined</div>
    }
}
 }

 module.exports = Button;