为什么会出现此错误

Question

我是React的新手，它试图建立一个表单，在点击Submit时，应该将组件状态设置为与用户输入相等，以便我可以存储它并在其他地方引用它。当控制台在提交后记录正确的字符串时，它可以工作。但是，尝试在屏幕上显示此状态时遇到麻烦。

我尝试将状态作为道具传递给子组件并将其渲染到那里，但是遇到了同样的错误。

import React from 'react';
var hasSetMainGoal = false;

class LearningGoals extends React.Component {
    constructor(props) {
        super(props);

        this.state = {
                maingoal: ''
        };

        this.handleInput = this.handleInput.bind(this);
        this.updateMainGoal = this.updateMainGoal.bind(this);
    }

    handleInput(e) {
        this.setState({ maingoal: e.target.value });
    }

    updateMainGoal = ({ target }) => {
        this.setState({ maingoal: target});
        console.log('My main goal is ' + this.state.maingoal);
        hasSetMainGoal = true;

    }

    render() {

        if (!hasSetMainGoal) {
        return (
            <div>
                <div className='setGoals'>
                    <div className='formField'>
                        <label className='formFieldLabel'>What is your main learning goal?</label>

                        <input type='text' id='mainGoal' className='formFieldInput' 
                        placeholder='' name='maingoal' value={this.state.value} onChange={this.handleInput} />
                    </div>

                    <div>
                        <button onClick={this.updateMainGoal}>Submit</button>
                    </div>
                </div>


            </div>
        );
        }
        else if (hasSetMainGoal) {

            return (
                <div>
                    <h1>My main goal is {this.state.maingoal}</h1>
                </div>
            );
        }
    }
}

export default LearningGoals;

我希望在屏幕上显示{this.state.maingoal}，但出现以下错误：

react-dom.development.js：57未捕获的不变违规：对象作为React子对象无效（找到：[object HTMLButtonElement]）。如果要渲染子级集合，请改用数组。在h1中（在SetGoals.js：55）在div中（位于SetGoals.js：54）

Answer 1

为什么会出现此错误

您的问题在这里，您将状态设置为target，但是target是一个对象。

updateMainGoal = ({ target }) => {
    //                        target is an object
    this.setState({ maingoal: target});
    console.log('My main goal is ' + this.state.maingoal);
    hasSetMainGoal = true;
}

当您尝试渲染它时，它会失败，因为您无法渲染对象。

else if (hasSetMainGoal) {

    return (
        <div>
            <h1>My main goal is {this.state.maingoal}</h1>
        </div>
    );
}

如果您看到错误

对象作为React子对象无效（找到：[object HTMLButtonElement]）

[object HTMLButtonElement]是target中的this.setState({ maingoal: target})

解决方法

您不应该在this.setState({ maingoal: target});中进行updateMainGoal。当用户键入输入内容并且handleInput为您设置状态时，您的状态已经是最新的。

您应该做的是保持hasSetMainGoal的状态，并在单击按钮时进行设置。

这是完整的组件代码

import React from 'react';

class LearningGoals extends React.Component {
    constructor(props) {
        super(props);

        this.state = {
                maingoal: '',
                hasSetMainGoal: false
        };

        this.handleInput = this.handleInput.bind(this);
        this.updateMainGoal = this.updateMainGoal.bind(this);
    }

    handleInput(e) {
        this.setState({ maingoal: e.target.value });
    }

    updateMainGoal = () => {
        this.setState({ hasSetMainGoal : true});
        console.log('My main goal is ' + this.state.maingoal);
    }

    render() {

        if (!this.state.hasSetMainGoal) {
        return (
            <div>
                <div className='setGoals'>
                    <div className='formField'>
                        <label className='formFieldLabel'>What is your main learning goal?</label>

                        <input type='text' id='mainGoal' className='formFieldInput' 
                        placeholder='' name='maingoal' value={this.state.value} onChange={this.handleInput} />
                    </div>

                    <div>
                        <button onClick={this.updateMainGoal}>Submit</button>
                    </div>
                </div>


            </div>
        );
        }
        else {

            return (
                <div>
                    <h1>My main goal is {this.state.maingoal}</h1>
                </div>
            );
        }
    }
}

export default LearningGoals;

Answer 2

不是将hasSetMainGoal设置为变量，而是将其设置为false。

因此，而不是：

var hasSetMainGoal = false;

要做：

this.state = {
                maingoal: '',
                hasSetMainGoal: false
        };

，然后在单击按钮时进行相应的设置，并检查为：

if (!this.state.hasSetMainGoal) {
}
else if (this.state.hasSetMainGoal) {

       //your code
    );
 }

ReactJS：呈现组件状态时出现问题

2 个答案:

为什么会出现此错误

解决方法