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 {

    render() {

        return (

            <div>

                <InputBox onChange={this.props.handleChange} />

                { this.props.updates.map((update) => (<p>{update.area}</p>)) }

            </div>

        )

    }

}

export default ByLocation;