Question

我对ReactJS很陌生，我的问题很不寻常，可能只是因为我没有按照预期的方式实施。

所以基本上说，之前这个工作正常，但我需要添加一些新功能，而且......好吧，有些东西已经关闭。

首先 - ConvFrame是顶级组件，显示在页面顶部，由ConvForm组件（用于添加新查询）和ConvList组成，其中包含未分配和新呼叫走。此处ConvList的ID和密钥为1。

下面还有工作人员列表，他们只使用ConvForm，字段本身是dropzones，可以快速分配新的呼叫任务。 ConvList这里的Id和Key等于worker的id。

在呈现ConvList时，它会向服务器查询列表中的作业。这适用于所有人。但是，通过ConvForm添加新项目时似乎存在一些奇怪的问题。它调用handleCommentSubmit()函数，调用this.loadCommentsFromServer();（愚蠢，我知道！）然后为记录设置新状态this.setState({records: data});

添加第一条记录时，/api/zlecenia会被调用两次。一次来自loadCommentsFromServer()内ConvFrame，第二次来自ConvList。通过表单添加第二个记录调用一次，该组件似乎没有对状态更改做出反应。我想，有些东西实施得很糟糕。

这是源代码： Conversations.js

//For dragging
var placeholder = document.createElement("div");
placeholder.className = "placeholder";
var dragged;
var over;

/**
 * Conversation
 * Should be used for listing conversation blocks, adds class based on age of task.
 * Detects drag events, renders block, calls dragEnd function to append block to new
 * location and uses props.OnDrop function to pass id of element and target id of worker
 */
window.Conversation = React.createClass({
    dynamicClass: function () {
        return "convo " + this.props.delay;
    },
    dragStart: function (e) {
        dragged = e.currentTarget;
        over = null;
        e.dataTransfer.effectAllowed = 'move';
        e.dataTransfer.setData("text/html", e.currentTarget);
    },
    dragEnd: function (e) {
        $(dragged).show();
        $(placeholder).remove();
            console.log(over, over.className);
        if (over && over.className === "candrop") {
            var id = Number(dragged.dataset.id);

            this.props.onDrop({id: id, target: over.id});
            over.appendChild(dragged);
        }else{
            console.log('returning base:' + over);
           $(dragged).parent().append(dragged);
        }
    },
  render: function() {
    return (
      <div draggable="true" data-id={this.props.id} onDragEnd={this.dragEnd} onDragStart={this.dragStart} className={this.dynamicClass()}  >
        {this.props.children}
      </div>
    );
  }
});

/**
 * ConvList
 * Displays conversation dropdown list. I should aim to make it single component, do not repeat for workers.
 * Detects dragOver for .candrop and place some funny placeholder. Detect position change from Conversation view
 * call master class from parent component and pass data. Detect delete event.
 */
window.ConvList = React.createClass({
    getInitialState: function () {
        return {data: []};
    },
    loadConvsFromServer: function () {
        $.ajax({
            url: baseUrl + '/api/zlecenia',
            type: 'GET',
            data: {id: this.props.id},
            success: function (data) {
                this.setState({data: data});
            }.bind(this),
            error: function (xhr, status, err) {
                console.error(this.props.url, status, err.toString());
            }.bind(this)
        });
    },
    componentDidMount: function () {
        this.loadConvsFromServer();
    },
    dragOver: function (e) {
        e.preventDefault();
        $(dragged).fadeOut();
        if (e.target.className === "candrop") {
            if (e.target.className == "placeholder")
                return;
            over = e.target;
            e.target.appendChild(placeholder, e.target);
        }
    },
    updatePosition: function (data) {
        console.log('update convo %d for member %e', data.id, data.target);

        $.ajax({
            url: baseUrl + '/api/zlecenia',
            type: 'PUT',
            data: {id: data.id, assign: data.target},
            success: function (data) {
            }.bind(this),
            error: function (xhr, status, err) {
                console.error(this.props.url, status, err.toString());
            }.bind(this)
        });
    },
    deleteTask: function (e) {
        var taskIndex = parseInt(e.target.value, 10);
        console.log('remove task: %d', taskIndex);

        $.ajax({
            url: baseUrl + '/api/zlecenia/' + taskIndex,
            type: 'DELETE',
            success: function (data) {
                this.loadConvsFromServer();
            }.bind(this),
            error: function (xhr, status, err) {
                console.error(this.props.url, status, err.toString());
            }.bind(this)
        });

    },
    render: function () {
      return (
       <div className="convlist" onDragOver={this.dragOver}>
            <div className="candrop" id={this.props.id} >{this.props.id}
                {this.state.data.map((c) => 
                    <Conversation  onDrop={this.updatePosition} delay={c.delayTime} id={c.id} key={c.id}>
                        <p className="convTop">{c.formattedTime} | Tel. {c.phone} | {c.name} | Nr.Rej {c.number}</p>
                        <p>{c.text}</p>
                        <button className="deleteConv"  onClick={this.deleteTask} value={c.id}>x</button>
                     </Conversation>
                )}
            </div>
        </div>

      );
    }
});

/**
 * ConvForm
 * Displays conversation create form. Prepares fields, validates them.
 * Call master function to add new record on send.
 */
var ConvForm = React.createClass({
    getInitialState: function () {
        return {phone: '', name: '', number: '', text: ''};
    },
    handlePhoneChange: function (e) {
        this.setState({phone: e.target.value});
    },
    handleNameChange: function (e) {
        this.setState({name: e.target.value});
    },
    handleNumberChange: function (e) {
        this.setState({number: e.target.value});
    },
    handleTextChange: function (e) {
        this.setState({text: e.target.value});
    },
    submitForm: function (e) {
        e.preventDefault();
        var phone = this.state.phone.trim();
        var name = this.state.name.trim();
        var number = this.state.number.trim();
        var text = this.state.text.trim();

        if (!text || !phone || !name || !number) {
            return;
        }
        this.props.onConvSubmit({phone: phone, name: name, number: number, text: text});
        this.setState({phone: '', text: '', number: '', name: ''});
    },
    render: function () {
        return (
        <form className="convForm" onSubmit={this.submitForm}>
            <div className="row">
                <div className="col-xs-12 col-md-4">
                    <div className="form-group">
                        <input
                        className="form-control"
                        type="text"
                        placeholder="Telefon"
                        value={this.state.phone}
                        onChange={this.handlePhoneChange}
                        />
                    </div>
                </div>
                <div className="col-xs-12 col-md-4">
                    <div className="form-group">
                        <input
                        className="form-control"
                        type="text"
                        placeholder="Imię i nazwisko"
                        value={this.state.name}
                        onChange={this.handleNameChange}
                      />
                    </div>
                </div>
                <div className="col-xs-12 col-md-4">
                    <div className="form-group">
                        <input
                        className="form-control"
                        type="text"
                        placeholder="Nr. rejestracyjny"
                        value={this.state.number}
                        onChange={this.handleNumberChange}
                      />
                    </div>
                 </div>
            </div>
            <div className="form-group">
                <textarea
                className="form-control"
                type="text"
                placeholder="Treść"
                value={this.state.text}
                onChange={this.handleTextChange}
                />
            </div>
            <input className="btn btn-success" type="submit" value="Zapisz" />
        </form>
                );
    }
});

/**
 * ConvFrame
 * Conversation main frame and root functions for both form and conversations listing.
 */
window.ConvFrame = React.createClass({
    getInitialState: function () {
        return {records: []};
    },
    loadCommentsFromServer: function () {
        $.ajax({
            url: baseUrl + '/api/zlecenia',
            type: 'GET',
            data: {id : 1},
            success: function (data) {
                this.setState({records: data});
            }.bind(this),
            error: function (xhr, status, err) {
                console.error(this.props.url, status, err.toString());
            }.bind(this)
        });
    },
    handleCommentSubmit: function (convo) {
        $.ajax({
            url: baseUrl + '/api/zlecenia',
            type: 'POST',
            data: convo,
            success: function (data) {
                this.loadCommentsFromServer();
            }.bind(this),
            error: function (xhr, status, err) {
                console.error(this.props.url, status, err.toString());
            }.bind(this)
        });
    },
  render: function() {
        return (
                <div className="add-new">
                        <div className="row">
                            <div className="col-xs-12 col-md-12 frame">
                                <div className="col-xs-12 col-md-7">
                                    <h3>Dodaj nową rozmowę</h3>
                                    <ConvForm onConvSubmit={this.handleCommentSubmit} />
                                </div>
                                <div className="col-xs-12 col-md-5">
                                    <ConvList key='1' id='1'  data={this.state.records} />
                                </div>  
                            </div>
                        </div>
                </div>
                );
    }
});

workers.js

/**
 * WorkerList
 * 
 */
var Worker = React.createClass({
    render: function () {
      return (
         <div>
              {this.props.children}
         </div>
      );
    }
});


/**
 * WorkerList
 * 
 */
var WorkerList = React.createClass({
    render: function () {
      return (
       <div className="worker-list">
                {this.props.data.map((worker) => 
                    <Worker id={worker.id} key={worker.id}>
                        <div className="row">
                            <div className="col-xs-12 col-md-12 frame">
                                <div className="col-xs-12 col-md-5">
                                     <h4>{worker.username}</h4>
                                </div>
                                <div className="col-xs-12 col-md-7">
                                <ConvList key={worker.id} id={worker.id} />
                                </div>  
                           </div>
                        </div>
                    </Worker>
                )}

        </div>

      );
    }
});

/**
 * WorkerForm
 * 
 */
var WorkerForm = React.createClass({
  render: function() {
    return (
      <div>
      </div>
    );
  }
});


/**
 * WorkerFame
 * 
 */
window.WorkerFrame = React.createClass({
    getInitialState: function () {
        return {data: []};
    },
    loadWorkersFromServer: function () {
        $.ajax({
            url: baseUrl + '/api/pracownicy',
            type: 'GET',
            success: function (data) {
                this.setState({data: data});
            }.bind(this),
            error: function (xhr, status, err) {
                console.error(this.props.url, status, err.toString());
            }.bind(this)
        });
    },
    componentDidMount: function () {
        this.loadWorkersFromServer();
    },
    handleWorkerSubmit: function (worker) {
        $.ajax({
            url: baseUrl + '/api/pracownicy',
            type: 'POST',
            data: worker,
            success: function (data) {
                this.loadWorkersFromServer();
            }.bind(this),
            error: function (xhr, status, err) {
                console.error(this.props.url, status, err.toString());
            }.bind(this)
        });
    },
  render: function() {
        return (
                <div className="add-new">
                        <div className="row">
                            <div className="col-xs-12 col-md-12">
                                <WorkerList data={this.state.data} />
                            </div>  
                           <div className="col-xs-12 col-md-12">
                                <WorkerForm onWorkerSubmit={this.handleWorkerSubmit} />
                            </div>
                        </div>
                </div>
                );
    }
});

final.js

var DashFrame = React.createClass({
  render: function() {
    return (
      <div>
      <ConvFrame/>
      <WorkerFrame/>
      </div>
    );
  }
});


ReactDOM.render(
  <DashFrame/>,
  document.getElementById('dashboard')
);

任何提示都将不胜感激。我的大脑沸腾了。

Answer 1

从（长）代码中我认为您的问题出现了，因为您在Value: 0:8 Occurs: 1 Time(s) %14 Value: 2:3 Occurs: 3 Time(s) %42 Value: 8:9 Occurs: 1 Time(s) %14 Value: 9:5 Occurs: 2 Time(s) %28中对服务器的调用位于<ConvList>内：

componentDidMount()

初始安装时，

componentDidMount: function () { this.loadConvsFromServer(); },始终只调用一次。

所以第二次，react没有调用componentDidMount()，没有调用服务器，你的状态没有改变，因此componentDidMount()没有更新。

要修复，请添加：

<ConvList>

更新组件时也会调用。

更新：您还需要为生成的componentDidUpdate: function () { this.loadConvsFromServer(); },添加条件，否则您将获得无限循环（setState() - ＆gt; componentDidUpdate() - ＆gt; {{1} } - ＆gt;重复）。

最佳位置可能在setState()内。类似的东西：

componentDidUpdate()

另外，我注意到loadConvsFromServer()内的... success: function (data) { var dataChanged = ... // some smart comparison of data with this.state.data if (dataChanged) { this.setState({data: data}); } }.bind(this), ...内的这个代码段：

submitForm()

这是一个危险的组合：第一个调用实质上将控制权传递回父节点，父节点可能（并且可能会）重新渲染整个树。然后立即使用<ConvForm>触发第二次渲染。但无法告诉他们将被解雇的顺序清理（并且更容易调试和维护）将移动this.props.onConvSubmit({phone: phone, name: name, number: number, text: text}); this.setState({phone: '', text: '', number: '', name: ''});清除所有输入到setState()生命周期方法。这样，每次组件由其父组件重新呈现时，所有输入都将清除。额外奖励：您的组件只会重新渲染一次。

状态更改后仅反应Js组件呈现一次

1 个答案: