Question

我正在使用React并尝试弄清楚如何从JSON中返回自动填充表单中的数据

这是数据

const falsyData = [{
    'Hello': {
      'what I do'       : 'you just say Hello',
      'which language'  : 'english'
    },
    'Travel': {
      'Etymology' : 'The origin of the word "travel" is...',
      'Purpose'   : 'include recreation'
    },
    'Gambling': {
      'Gamble'  : 'Gambling is the wagering of money...',
      'Origins' : 'Many popular games played in...'
    }
  }];

  render () {
    return (
      <Grid>
            <TextField
                onChange={this._onChange.bind(this)}
                onKeyUp={this._changeInput.bind(this)}
                value={this.state.value} />
            {!!this.state.value.length &&
              <Row>
                <Column>  
                 //HERE I PRINT THE RESULTS OF THE SEARCH
                  <p>{this.state.result}</p>
                </Column>                              
              </Row>
            }
      </Grid>
    );
  }

  _matchData = (input) => {
    let reg = new RegExp(input.split('').join('\\w*').replace(/\W/, ""), 'i');
    return falsyData.map(function(data) {
      if (data.match(reg)) {
        return data;
      }
    });
  }

  _changeInput = (val) => {
    let autoCompleteResult = this._matchData(this.state.value);
    if (autoCompleteResult.length) {
      this.setState({result: autoCompleteResult.join(' ')});
    };
  }

  _onChange = (event) => {
    this.setState({value: event.target.value});
  }

我需要过滤数据，假设用户输入 A ，所以在<p>{this.state.result}</p>我希望看到所有字母 A 。

更具体一点：如果用户键入 hello ，我希望hello中的falsyData及其属性和属性。

顺便说一句

每当我在搜索栏中输入内容时，这就是我在浏览器控制台中输入的内容

未捕获的TypeError：data.match不是函数

Answer 1

falsyData是一个对象数组。在这段代码中：

return falsyData.map(function(data) {
  if (data.match(reg)) {
    return data;
  }
});

您在对象上进行映射，因此data没有match函数，因为它不是字符串。

根据您要匹配的内容，更改此项以匹配对象中的字符串值。例如，如果您只想匹配外部对象的键：

return falsyData.map(function(data) {
  for (var key in data) {
    if (key.match(reg)) {
      return key;
    }
  }
});

自动填充表单错误：未捕获TypeError：data.match不是函数

1 个答案: