React组件渲染但未挂载因此无法setState

Question

我有一个名为 FillForm 的功能组件，它调用要在 FormFiller 函数中按顺序呈现的对象列表。这些组件正在正确渲染和显示，但是当尝试让它们更改其内部状态时，我收到错误

警告：无法在尚未挂载的组件上调用 setState。这是一个空操作，但它可能表明您的应用程序中存在错误。相反，直接分配给

this.state

或在 MultipleChoiceQuestion 组件中定义具有所需状态的

state = {};

类属性。

这是填表功能：

const FillForm = props => {

return (
    <div className={classes.container} key={1}>
        <p>Form Filler</p>
        {formElements[currentPage].map((Element => (
            Element.render()
        )))}
        <Button variant="contained" disabled={backDisabled} onClick={handleBack}>BACK</Button>
        <SubmitButton />
    </div>
)

}

我已经删除了与此处问题无关的代码，但 formElements 都是我的 BaseElement 的子级，并且 formElements 对象是需要按顺序呈现的上述类对象的列表。

import React from "react"
  class BaseEntry extends React.Component {
constructor(props) {
    super(props);
    this.key = 0
    this.type = ""
}
setID(id) {
    this.key = id;
}
setType(type) {
    this.type = type;
}

userResponse() {
    return (null);
}
//This should always be overridden
render() {
    return (
        <React.Fragment>
            <div></div>
        </React.Fragment>
    )
}} export default BaseEntry;

下面的代码给我带来了问题，当我尝试在多项选择问题中选择不同的选择时，出现错误。

class MultipleChoiceQuestion extends BaseEntry {
    constructor(question_text, choices) {
        super();
        this.question_text = question_text //A string
        this.choices = choices // [[1, "Choice text"], [2, "Choice text two"]]
        this.response = 1
        this.handleChange = this.handleChange.bind(this) 
        this.state = {response: 1}     
    }

    userResponse() {
        return ({
            "id" : this.id,
            "response" : this.response,
            "type" : this.type
        })
    }

    componentDidMount() {
        console.log("mounted")
    }

    handleChange(e) {
        console.log(e.target.value)
        this.setState({response: e.target.value})
    }
    
    render() {
        return (
            <React.Fragment key={this.key}>
                <div>
                    <h2>{this.response}</h2>
                    <FormControl component="fieldset">
                        <RadioGroup aria-label={this.question_text} value={this.response} name={this.question_text} onChange={this.handleChange}>
                            {this.choices.map(((choice, index) => (
                                <FormControlLabel value={choice[0]} control={<Radio />} label={choice[1]} key={index}/>
                            )))}
                        </RadioGroup>
                    </FormControl>
                </div>
            </React.Fragment>
        );
    }
}

export default MultipleChoiceQuestion; 

这里是codesandbox：[https://codesandbox.io/s/priceless-leavitt-yh5dp?file=/src/FillForm.js]

Answer 1

我为同样的事情苦苦挣扎了几天。尽管我已经读到语法

<MyComponent />

相当于

myComponentInstance.render()

（至少对于类组件而言），但它并不能按预期工作。这是因为在父组件的

render

函数范围内调用子组件的

render

函数会渲染子组件，但是 React 会“错过”子组件的渲染事件（第一个已知）为“mounting”），因此 React 不会将像

setState

这样的函数附加到子组件上。这只是基于我的观察；我还没有检查 React 代码来在代码级别确认这一点。

在我的调查过程中，我遇到很多人指出，即使手动调用

render()

对于没有状态的组件也有效，但它的性能不高，因为每次父组件重新渲染时，子组件都会重新渲染，即使它的 props 没有改变。

Answer 2

render() {
    return (
        <React.Fragment key={this.key}> {/* remove key form here as your component dosen't have it */}
            <div>
                <h2>{this.state.response}</h2> {/* here is the problem use `this.state.resopnse` instead of `this.response` */}
                <FormControl component="fieldset">
                    <RadioGroup aria-label={this.question_text} value={this.response} name={this.question_text} onChange={this.handleChange}>
                        {this.choices.map(((choice, index) => (
                            <FormControlLabel value={choice[0]} control={<Radio />} label={choice[1]} key={index}/>
                        )))}
                    </RadioGroup>
                </FormControl>
            </div>
        </React.Fragment>
    );
}

您在渲染函数中使用

this.response

，您应该使用

this.state.response

。并从片段中删除

this.key

，因为您的组件没有这样的 。