Question

我们正在构建一个仿真工具，并试图替换当前使用React处理弹出窗口的实现。

问题在于我们的弹出组件的状态设置为

this.state = connections[this.props.id]

该对象是一个存在的全局对象，将在一个单独的js文件中创建和更新该对象，如果我进入控制台并将connection [this.props.id] .name从“ junction 15”更改为“ junction 12” ，更改不会立即呈现。我必须关闭并重新打开弹出窗口，以使其具有正确的信息。

这是我们的架构师想要的，而他的解释方式是，他需要对我们的连接对象进行任何更改，以免在NEED弹出窗口中将其反映在弹出窗口中，但是如果状态设置为标记，并且我通过控制台修改了对象中标记的名称，我不明白为什么它不会在React中自动更新

我已经考虑过尝试使用生命周期方法，redux，mobx，js代理，响应上下文，但是我仍在学习，而且我认为我正在使它变得比应有的复杂。

这是我们带有组件的简单弹出窗口：

let globalValue = 'initial'

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

        this.state = connections[this.props.id];
        this.changeName = this.changeName.bind(this);
    }
    updateOutsideReactMade() {
    this.setState(state);
    // this.forceUpdate();
}
    changeName(newName) {
        connections[this.props.id].name = newName;
        this.setState(connections[this.props.id]);
    }

    // ignore this, this was my attempt at using a lifecycle method
    //componentDidUpdate(prevProps) {
        // Typical usage (don't forget to compare props):
    //    if (this.props.name !== prevProps.name) {
    //        this.setState(this.props.name);
    //    }
    //}

    render() {
        return (
            <div>
                <Input onChange={this.changeName} />
                <Header name={this.state.name}
                        id={this.state.id}
                />
            </div>
        );
    }
}

function renderReactButton(iddd, type){
    ReactDOM.render(
    <ReactButton id={iddd} />,
    document.getElementById(`react-component-${type}-${iddd}`)
    );
}




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


    render() {
        return (
            <h1>{this.props.name}
                {this.props.id}</h1>
        );
    }
}


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

        this.handleChange = this.handleChange.bind(this);
    }


    handleChange(e) {
        const name = e.target.value;
        this.props.onChange(name);
    }

    render() {
        return (
            <input onChange={this.handleChange}/>
        );
    }
}

所以我的问题是我如何使用全局对象（连接）作为我的反应状态，以及是否有某些东西修改了React之外的数据并反映在DOM上。现在，我们可以通过反应弹出窗口更改名称，但是如果通过控制台更改名称，它将不会更新。谢谢你们！

**** UPDATE **** 18/8/15 当每个新对象输入到数组中时，我将它们包装为代理。

connections[key] = new Proxy(polyLine, handleUpdatesMadeToMarkersOutsideOfReact);

我设置了处理程序：

let handleUpdatesMadeToMarkersOutsideOfReact = {
    get: (connections, id) => {

        return connections[id];
    },

    set: (connections, id, value) => {
        //trigger react re-render
        console.log('inside set');

        //trigger react to update

        return true;
    }

};

现在，我一直试图让处理程序触发我的react组件进行更新。我为我的组件创建了一个用于强制更新的类函数，但我很难以设置方式来访问它。

Answer 1

通常state是一个对象-确定存在的对象是可以的。 React需要使用setState才能处理生命周期，例如以更新状态渲染。从控制台修改状态对象不会让反应做出反应;）

您需要某种类型的观察者，用以告知数据更改后做出的反应并强制进行渲染（调用this.forceUpdate()）。

使用全局JS对象作为React组件的状态

1 个答案: