Javascript React组件在状态更改时不更新
我试图用API调用中的数据填充select。呈现select，然后当数据返回时，我希望它填充select的选项。当数据返回并将Javascript React组件在状态更改时不更新,javascript,jquery,reactjs,Javascript,Jquery,Reactjs,我试图用API调用中的数据填充select。呈现select，然后当数据返回时，我希望它填充select的选项。当数据返回并将this.state.tagList作为道具传递给组件时，我正在设置tagList的状态。但当我更新状态时，它并没有更新组件。还将获取以下错误： 未捕获不变冲突：findComponentRoot（…，.3.2.0.0.0.1）：无法找到元素。这可能意味着DOM发生了意外的变化（例如通过浏览器），通常是因为在使用表、嵌套标记（如，）或在父级中使用非SVG元素时忘记了。尝试
this.state.tagListtagList未捕获不变冲突：findComponentRoot（…，.3.2.0.0.0.1）：无法找到元素。这可能意味着DOM发生了意外的变化（例如通过浏览器），通常是因为在使用表、嵌套标记（如，）或在父级中使用非SVG元素时忘记了。尝试检查具有React ID``的元素的子节点。'use strict'
import React from 'react';
import classNames from 'classnames';
//import ReactDOM from 'react-dom';
var TagBar = React.createClass({
propTypes: {
tagList: React.PropTypes.array.isRequired
},
render: function() {
return(
<select ref="tagBar" className="searchbar ui multiple fluid search dropdown" multiple>
{
this.props.tagList.map(function(tag){
return <option key={tag._id} value={tag.tag}>{tag.tag}</option>;
})
}
</select>
)
}
});
export default TagBar;
'use strict'
import React from 'react';
import ReactDOM from 'react-dom';
import TagBar from '../../components/tagbar';
import InterviewAPI from '../api.js';
var AddEditQuestion = React.createClass({
propTypes: {
action: React.PropTypes.string.isRequired
},
getInitialState: function() {
var details = {};
switch (this.props.action) {
case 'add':
//init an empty props object
details = {
text: '',
tech: '',
tags: {},
level: 0,
answer: ''
}
break;
case 'edit':
//the details are passed in as props
details = this.props.details
break;
}
//add is the default action
return {
action: this.props.action,
details: details,
tagList: []
}
},
render: function() {
return(
<div ref="addQuestionModal" className="ui modal addQuestionModal">
<i className="close icon"></i>
<div className="header">
{this.state.action} Question
</div>
<div className="content">
<div className="description">
<div className="ui form">
<div className="field">
<label htmlFor="questionText">Question</label>
<textarea id="questionText" value={this.state.details.text}></textarea>
</div>
<div className="field">
<label htmlFor="questionAnswer">Answer</label>
<textarea id="questionAnswer" value={this.state.details.answer}></textarea>
</div>
<div className="field">
<label htmlFor="questionTags">Tags</label>
<TagBar tagType='question' action={this.state.action} tagList={this.state.tagList} />
</div>
<div className="ui two column grid">
<div className="row">
<div className="column">
<div className="field">
<label htmlFor="questionTech">Technology</label>
<select ref="questionTech" id="questionTech" name="questionTech">
<option value="">select...</option>
<option value="js">Javascript</option>
<option value="net">.NET</option>
<option value="mobile">Mobile</option>
</select>
</div>
</div>
<div className="column">
<div className="field column">
<label htmlFor="questionLevel">Level</label>
<select ref="questionLevel" id="questionLevel" name="questionLevel">
<option value="">select...</option>
<option value="junior">Junior</option>
<option value="senior">Senior</option>
</select>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div className="actions">
<div className="ui middle aligned two column grid">
<div className="row">
<div ref="deleteAction" className="left aligned column">
{/* based on the state of the modal, this will show different buttons */}
</div>
<div ref="actionButtons" className="right aligned column actionButtons">
{/* based on the state of the modal, this will show different buttons */}
</div>
</div>
</div>
</div>
</div>
)
},
componentWillMount: function() {
this.getTags();
},
componentDidMount: function() {
//initialize select dropdowns
$(this.refs.tagBar).dropdown();
$(this.refs.questionTech).dropdown();
$(this.refs.questionLevel).dropdown();
//display the action buttons (based on whether you're adding or editing)
this.displayActionButtons();
//once the modal is rendered, go ahead and open it
$(this.refs.addQuestionModal).modal('show');
},
getTags: function() {
var apiPath = InterviewAPI.routes.basePath + InterviewAPI.routes.realm.questionTags;
//make the api call, passing result to callback
$.get(apiPath, this.gotTags);
},
gotTags: function(result) {
var options = [];
if (result.length > 0) {
//if you got tags back, add them to the dropdown
this.setState({
tagList: result
});
}
},
handleAddQuestion: function() {
console.log('add question');
},
closeModal: function() {
$(this.refs.addQuestionModal).modal('hide');
},
});
export default AddEditQuestion;
“严格使用”
从“React”导入React；
从“类名称”导入类名称；
//从“react dom”导入react dom；
var TagBar=React.createClass({
道具类型：{
标记列表：React.PropTypes.array.isRequired
},
render:function（）{
返回(
{
this.props.tagList.map（函数（标记）{
返回{tag.tag}；
})
}
)
}
});
导出默认标记栏；
'use strict'
import React from 'react';
import classNames from 'classnames';
//import ReactDOM from 'react-dom';
var TagBar = React.createClass({
propTypes: {
tagList: React.PropTypes.array.isRequired
},
render: function() {
return(
<select ref="tagBar" className="searchbar ui multiple fluid search dropdown" multiple>
{
this.props.tagList.map(function(tag){
return <option key={tag._id} value={tag.tag}>{tag.tag}</option>;
})
}
</select>
)
}
});
export default TagBar;
'use strict'
import React from 'react';
import ReactDOM from 'react-dom';
import TagBar from '../../components/tagbar';
import InterviewAPI from '../api.js';
var AddEditQuestion = React.createClass({
propTypes: {
action: React.PropTypes.string.isRequired
},
getInitialState: function() {
var details = {};
switch (this.props.action) {
case 'add':
//init an empty props object
details = {
text: '',
tech: '',
tags: {},
level: 0,
answer: ''
}
break;
case 'edit':
//the details are passed in as props
details = this.props.details
break;
}
//add is the default action
return {
action: this.props.action,
details: details,
tagList: []
}
},
render: function() {
return(
<div ref="addQuestionModal" className="ui modal addQuestionModal">
<i className="close icon"></i>
<div className="header">
{this.state.action} Question
</div>
<div className="content">
<div className="description">
<div className="ui form">
<div className="field">
<label htmlFor="questionText">Question</label>
<textarea id="questionText" value={this.state.details.text}></textarea>
</div>
<div className="field">
<label htmlFor="questionAnswer">Answer</label>
<textarea id="questionAnswer" value={this.state.details.answer}></textarea>
</div>
<div className="field">
<label htmlFor="questionTags">Tags</label>
<TagBar tagType='question' action={this.state.action} tagList={this.state.tagList} />
</div>
<div className="ui two column grid">
<div className="row">
<div className="column">
<div className="field">
<label htmlFor="questionTech">Technology</label>
<select ref="questionTech" id="questionTech" name="questionTech">
<option value="">select...</option>
<option value="js">Javascript</option>
<option value="net">.NET</option>
<option value="mobile">Mobile</option>
</select>
</div>
</div>
<div className="column">
<div className="field column">
<label htmlFor="questionLevel">Level</label>
<select ref="questionLevel" id="questionLevel" name="questionLevel">
<option value="">select...</option>
<option value="junior">Junior</option>
<option value="senior">Senior</option>
</select>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div className="actions">
<div className="ui middle aligned two column grid">
<div className="row">
<div ref="deleteAction" className="left aligned column">
{/* based on the state of the modal, this will show different buttons */}
</div>
<div ref="actionButtons" className="right aligned column actionButtons">
{/* based on the state of the modal, this will show different buttons */}
</div>
</div>
</div>
</div>
</div>
)
},
componentWillMount: function() {
this.getTags();
},
componentDidMount: function() {
//initialize select dropdowns
$(this.refs.tagBar).dropdown();
$(this.refs.questionTech).dropdown();
$(this.refs.questionLevel).dropdown();
//display the action buttons (based on whether you're adding or editing)
this.displayActionButtons();
//once the modal is rendered, go ahead and open it
$(this.refs.addQuestionModal).modal('show');
},
getTags: function() {
var apiPath = InterviewAPI.routes.basePath + InterviewAPI.routes.realm.questionTags;
//make the api call, passing result to callback
$.get(apiPath, this.gotTags);
},
gotTags: function(result) {
var options = [];
if (result.length > 0) {
//if you got tags back, add them to the dropdown
this.setState({
tagList: result
});
}
},
handleAddQuestion: function() {
console.log('add question');
},
closeModal: function() {
$(this.refs.addQuestionModal).modal('hide');
},
});
export default AddEditQuestion;
“严格使用”
从“React”导入React；
从“react dom”导入react dom；
从“../../components/TagBar”导入标记栏；
从“../api.js”导入InterviewAPI；
var AddEditQuestion=React.createClass({
道具类型：{
操作：React.PropTypes.string.isRequired
},
getInitialState:函数（）{
var-details={}；
切换（this.props.action）{
案例“添加”：
//初始化一个空的props对象
详情={
文本：“”，
技术人员：''，
标记：{}，
级别：0，
答复：''
}
打破
案例“编辑”：
//细节作为道具传递
details=this.props.details
打破
}
//添加是默认操作
返回{
动作：这个。道具。动作，
详情:详情,，
标记列表：[]
}
},
render:function（）{
返回(
{this.state.action}问题
问题:
答复
标签
技术
选择。。。
Javascript
.NET
可移动的
水平仪
选择。。。
年少者
级别高的
{/*根据模式的状态，这将显示不同的按钮*/}
{/*根据模式的状态，这将显示不同的按钮*/}
)
},
componentWillMount:function（）{
this.getTags（）；
},
componentDidMount:function（）{
//初始化选择下拉列表
$（this.refs.tagBar）.dropdown（）；
$（this.refs.questionTech）.dropdown（）；
$（this.refs.questionLevel）.dropdown（）；
//显示操作按钮（基于您是添加还是编辑）
这个.displayActionButtons（）；
//渲染模式后，继续并打开它
$（this.refs.addQuestionModal）.modal