Question

我正在尝试使用API调用中的数据填充select。渲染选择，然后当数据返回时，我希望它填充选择的选项。我在数据返回时设置状态g++ -o MyCppApp MyCppApp.cpp MyCDriver.o，并将tagList作为支柱传递给组件。但是当我更新状态时，它不会更新组件。还会收到以下错误：

this.state.tagList

**注意：不是我的代码。试图帮助一个项目的同事**

选择组件：

Uncaught Invariant Violation: findComponentRoot(..., .3.2.0.0.0.1): Unable to find element. This probably means the DOM was unexpectedly mutated (e.g., by the browser), usually due to forgetting a <tbody> when using tables, nesting tags like <form>, <p>, or <a>, or using non-SVG elements in an <svg> parent. Try inspecting the child nodes of the element with 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;内调用Uncaught Invariant Violation时，会引发setState。

Answer 1

看起来有几个jQuery插件正在直接编辑DOM，这会引发反响。看起来你正在使用jQuery UI，编辑DOM非常自由......如果可能的话，使用为ReactJs设计的插件。

对于初学者，请尝试替换以下内容：

jQuery下拉列表：https://github.com/JedWatson/react-select

jQuery模式：https://github.com/reactjs/react-modal

另外，请看一下react-bootstrap：http://react-bootstrap.github.io/

Answer 2

在语义ui中使用模态时，当你show模态时，它会在DOM中将它移动到＆＃34; show＆＃34;它。因此，虚拟DOM React知道与真实DOM不同。这是导致错误抛出的原因。为了防止模态在DOM中移动，您需要将detachable属性设置为false，如：

 $('.addQuestionModal').modal({detachable:false}).modal('show');

然后模态在虚拟和实际DOM中都处于同一位置，React可以继续与它进行交互。

React组件不更新状态更改

2 个答案: