ReactJS-使用map迭代数组中的每个项目（从状态开始）。项目的属性未定义

debugcn 发表于 Dev

阿杰沙（Ajay Shah）

在Python / Django之后，我尝试使用ReactJS。我能够按照教程学习，至少了解ReactJS的工作原理。因此，我想到了实现一个简单的方案，其中所有项目都形成一个状态。在用户输入输入后，将过滤项目。我几乎要这样做。这是我的App.js文件。

import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';
import ByLocation from './components/Bylocation';

class App extends Component {
  state = {
      updates : [
          {
            id:1,
            area: 'yavatmal',
            phase: 'input',
            program: 'clap',
            activity: 'distribution',
            timestamp: '26-06-2020 14:30'

          },

          {
            id:2,
            area: 'pune',
            phase: 'input',
            program: 'clap',
            activity: 'utilization',
            timestamp: '26-06-2020 12:00'
          },

      ],
      filteredupdates : [
          {
            id:1,
            area: 'yavatmal',
            phase: 'input',
            program: 'clap',
            activity: 'distribution',
            timestamp: '26-06-2020 14:30'

          },

          {
            id:2,
            area: 'pune',
            phase: 'input',
            program: 'clap',
            activity: 'utilization',
            timestamp: '26-06-2020 12:00'
          },

      ]
  }


  onChange = (e) => {
    this.setState({filteredupdates:this.state.updates})
    let myUpdates = this.state.updates.filter(update => update.area.includes(e.target.value));
    this.setState({filteredupdates:myUpdates})
  }


  render() {
      return (
        <div className="App">
          <h3>Search By Location: </h3>
          <ByLocation updates={this.state.updates} handleChange={this.handleChange}/>
        </div>
      );
  }
}

export default App;

这是“分配”组件。

import React, { Component } from 'react';
import InputBox from './Inputbox';


class ByLocation extends Component {

    render() {
        return (
            <div>
            <InputBox onChange={this.props.handleChange} />
                this.props.updates.map((update) => (
                    <p>{update.area}</p>
                )
            </div>
        )


    }

}

export default ByLocation;

最后是我的最后一个组件，输入框。

import React, { Component } from 'react';

class InputBox extends Component {

    render() {

        return (
            <div>
            <input type="text" placeholder="Enter location" />
            </div>
        )


    }

}

export default InputBox;

我知道我必须更新handlechange函数。但是当前代码拒绝运行

无法编译./src/components/Bylocation.js行12:25：未定义'update'no-undef

搜索关键字以了解有关每个错误的更多信息。

为什么在下一行中也未定义update？也就是说，我介绍更新的map函数行是可以的，但是ReactJS在下一行中抱怨更新。

有人可以帮我吗？

马里克·伊斯塔（Marik Ishtar）

这段代码this.props.updates.map((update) => (被视为文本，但是当您添加{update.area}花括号时，react会尝试计算的值，update.area但找不到update对象

您需要包装this.props.updates.map一个{}

尝试这个

import React, { Component } from 'react';
import InputBox from './Inputbox';


class ByLocation extends Component {

    render() {
        return (
            <div>
                <InputBox onChange={this.props.handleChange} />
                { this.props.updates.map((update) => (<p>{update.area}</p>)) }
            </div>
        )
    }

}

export default ByLocation;

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。