在ReactJS中传递道具，它们不会加载，同时接收到目标容器错误

Passing props through in ReactJS and they won't load, while receiving a target container error?

本文关键字：错误 目标 加载 ReactJS      更新时间：2023-09-26

希望有人能对我最近遇到的问题有所启发。我试图使某人编辑一些个人资料信息(用户名，电子邮件等)的登陆页。问题是，当我将props从一个函数传递到另一个函数时，它们加载为未定义。相关代码如下…

class ChangeFields extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            user: [
                {
                    username: "test"
                }
            ]
        }
    }
    render() {
        const formSample = (
            <div>
                <h3>Account Information:</h3>
                <br></br>
                <CurrentInfo user={this.state.user} onItemSelect={this.updateInfo()} />
            </div>
        );
        return formSample;
    }
}
const CurrentInfo = ({user, onItemSelect}) => {
    console.log(user.username);
    const formElement = (
        <Form horizontal>
            <FormGroup controlId="formHorizontalUsername">
                <Col componentClass={ControlLabel} sm={2}>
                    {user.username}
                </Col>
                <Col sm={10} value={user.username}>
                    <FormControl controlId="testControl" value={user.username} />
                </Col>
            </FormGroup>
        </Form>
    );
    return formElement;
};

不幸的是，"user。CurrentInfo块中的username"输出为未定义。了解吗?注意:这是代码的简化版本，如果需要更多，我可以提供它。

同样值得注意的是，我收到一个警告:Uncaught Error: _registerComponent(…):Target container is not a DOM element.

我已经尝试移动我的行在index.html底部，因为其他人已经建议，但这并没有解决它。

不幸的是，"user。CurrentInfo块中的username"输出为未定义。了解吗?

: 

this.state = {
            user: [
                {
                    username: "test"
                }
            ]
        }
应:

this.state = {user: {username: "test"}};

您当前正在将user属性设置为数组。

同样值得注意的是，我收到一个警告:Uncaught Error: _registerComponent(…):Target container is not a DOM element.

这可能发生在代码中，而不是在你的问题。

相关文章：