有选择地做出反应，不将新道具传递给渲染 object

Question

我正在开发一个 multi-stage 表单，该表单基于 this guide 通过 AJAX 获取一些中间数据。我遇到一个奇怪的问题，即 React 没有将新道具传递给组件。

// MyForm.js.jsx
var MyForm = React.createClass({
    render: function() {
        switch(this.state.stage) {
            case 1:
                return <InitialFields 
                            nextStage={this.nextStage}
                            save={this.save}
                        />
            case 2:
                return <ChoiceFields 
                            title="Choose first thing:"
                            field="first_id"
                            options={this.state.firstChoices}
                            nextStage={this.nextStage}
                            save={this.save}
                        />
            case 3:
                return <ChoiceFields 
                            title="Choose second thing:"
                            field="second_id"
                            options={this.state.secondChoices}
                            nextStage={this.nextStage}
                            save={this.save}
                       />
         }
    }
// etc ...
});

ChoiceFields.js.jsx:

var ChoiceFields = React.createClass({
    render: function() {
        console.log(this.state);
        var options = this.setOptions();
        return (
            <div className="choiceFields"> 
                <h1>{this.props.title}</h1> 
                <SearchBar onChange={this.onSearch} /> 
                <div className="btn-group">{options}</div> 
                <NextButton next={this.saveAndContinue} text="Set Default Values" />
            </div>
        );
    },

    setOptions: function() {
        var buttons = this.state.options;

        return buttons.map(function(choice) {
            return (
                <ChoiceButton key={choice.id} title={choice.name} 
                    description={choice.description} id={choice.id}
                    makeSelection={this.selectButton} selected={choice.selected}
                />
            );
        }.bind(this));
    }
});

当状态从 1 前进到 2 时，它会毫无问题地呈现 ChoiceFields。当状态从 2 前进到 3 时，它会呈现新标题，但 options 道具保持不变，尽管给它一个不同的 object.

有什么方法可以强制 React 更新 prop，或者以其他方式重新渲染 ChoiceFields object？

--更新--

我正在将 this.props.options 复制到 this.state.options，并使用状态来跟踪是否选择了一个选项。根据@superfell 的建议，我将 object 数组保留在 props 中，并计算在渲染方法中选择了哪个。这解决了问题。

Answer 1

根据评论，您正在将道具复制到 getInitialState 中的 ChoiceFields 组件中的状态。当 props 更新时，getInitialState 不会被再次调用，所以你只能看到陈旧的状态。你可以加一个componentWillReceiveProps function to ChoiceFields that can update state from the new props. Or you can refactor to not copy props to state at all, as that is a specific anti-pattern called out by React。

Answer 2

您可以使用的另一个选项是为您的 ChoiceField 变体提供不同的键，这样 React 就会知道它们是不同的实例，并且当您在后续渲染中在它们之间交换时，它们将各自获得完整的组件生命周期:

        case 2:
            return <ChoiceFields 
                        key="first"
                        title="Choose first thing:"
                        field="first_id"
                        options={this.state.firstChoices}
                        nextStage={this.nextStage}
                        save={this.save}
                    />
        case 3:
            return <ChoiceFields 
                        key="second"
                        title="Choose second thing:"
                        field="second_id"
                        options={this.state.secondChoices}
                        nextStage={this.nextStage}
                        save={this.save}
                   />

React.js and Dynamic Children - Why the Keys are Important 对正在发生的事情进行了很好的解释，并提供了相关文档的链接。

有选择地做出反应，不将新道具传递给渲染 object

React selectively not passing new props to rendered object

javascript

reactjs