渲染搜索数据时未捕获的不变违规答案

【问题标题】：Uncaught Invariant Violation on rendering search data渲染搜索数据时未捕获的不变违规
【发布时间】：2016-07-31 06:41:59
【问题描述】：

我正在尝试使用 React 实现搜索。我的逻辑流程有 2 个问题：

将输入设置为参数
渲染从服务器获取的数据

我在玩的时候遇到了错误提示

Uncaught Invariant Violation 输入是一个空元素标签，不能有children 或使用props.dangerouslySetInnerHTML。

这是我的代码：

import React, { PropTypes } from 'react';
import withStyles from 'isomorphic-style-loader/lib/withStyles';
import s from './Home.scss';
import AWS from 'aws-sdk';

var GetTech = React.createClass({
  render: function() {
    var createItem = function(item) {
      var csd = new AWS.CloudSearchDomain({
        endpoint: 'mycloudsearch.amazonaws.com',
        region: 'us-east-1'
      });
      var params = {
        query: {this.state.text}
      }
      csd.search(params, function (err, data) {
        if (err) console.log(err, err.stack);
        else {
          console.log(JSON.stringify(data));
        }
      });
    }
    return (
      {this.props.items.map(crateItem)}
    )
  }
});

var FilteredTechs = React.createClass({
  getInitialState: function() {
    return {
      text: '',
      items: []
    };
  },
  handleChange: function(event) {
    console.log(event);
    this.setState({
      text: event.target.value
    });
  },
  handleSearch: function(event) {
    event.preventDefault();
    this.setState({
      items: this.props.items,
      text: ''
    });
  },
  render: function() {
    return (
      <div>
        <form onSubmit={this.handleSearch}>
          <input
            type="text"
            value={this.state.text}
            onChange={this.handleChange}
          />
          <input type="button">Search</input>
        </form>
        <GetTech items={this.state.items} />
      </div>
    );
  }
});


function Home({ techs }) {
  <FilteredTechs />
}

Home.propTypes = {
  techs: PropTypes.arrayOf(PropTypes.shape({
  })).isRequired,
};

export default withStyles(Home, s);

我是 React 新手。请根据需要给我建议，非常感谢您的提示和 cmets。非常感谢！

【问题讨论】：

标签： javascript node.js amazon-web-services reactjs rendering

【解决方案1】：

错误很明显：inputs 必须是 void 元素；也就是说，它们必须是自动关闭的。

此语法无效：<input type="button">Search</input>

您想要：<input type="button" value="Search" />

或者：<button>Search</button>

【讨论】：

您应该提出一个新问题，而不是更改问题。

【解决方案2】：

输入是自闭合标签，但是在某些情况下您可以使用<Input></Input> 您可以安装 reactstrap 包，然后导入并使用<Input></Input> 标签而不是使用<input></input>。另外，您可以查看链接：https://reactstrap.github.io/components/input-group/ 此外，您可以检查输入类型：reactstrap Forms

【讨论】：

另外，您可以检查输入类型：reactstrap.github.io/components/form