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

Question

在 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;

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

无法编译 ./src/components/Bylocation.js 第 12:25 行：未定义“更新” no-undef

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

为什么在下一行中也更新未定义？也就是说，我引入更新的地图函数行没问题，但 ReactJS 在下一行抱怨更新。

有人可以在这里帮助我吗？

Answer 1

此代码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 {&nbsp; &nbsp; render() {&nbsp; &nbsp; &nbsp; &nbsp; return (&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <InputBox onChange={this.props.handleChange} />&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; { this.props.updates.map((update) => (<p>{update.area}</p>)) }&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; )&nbsp; &nbsp; }}export default ByLocation;