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

Question

After Python/Django I am trying my hands on ReactJS. I was able to follow a tutorial and at least understand how ReactJS works. So I thought of implementing a simple scenario wherein all items form a state are shown. Upon user entry in input, the items are filtered. That's pretty much I am trying to do. Here is my App.js file.

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;

Here is the Bylocation component.

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;

And finally my last component,inputbox.

import React, { Component } from 'react';

class InputBox extends Component {

    render() {

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


    }

}

export default InputBox;

I know I have to update handlechange function. But the current code refuses to run

Failed to compile./src/components/Bylocation.js Line 12:25: 'update' is not defined no-undef

Search for the keywords to learn more about each error.

Why is update undefined that too in the next line? That is, my map function's line where I introduce update is ok but ReactJS is complaining about update in the next line.

Can someone help me here?

Answer 1

This code this.props.updates.map((update) => ( is treated as text, but when you add {update.area} the curly braces, react tries to calculate the value of update.area but it it didn't find the update object

You need to wrap this.props.updates.map in a {}

Try this

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;