javascript - 如何在映射并将 onClick 函数作为 Prop 传递后定位特定元素

Question

我遇到了这样的问题，我从 API 获取了我的记录数组，将其映射到单个元素并将它们作为单个组件输出。我有改变父组件状态的功能，将值传递给子组件，子组件应该在单击按钮后隐藏/显示 div 内容。

当然。它正在工作，但部分工作 - 我的所有 div 都被隐藏/显示。我已经为每个子组件设置了特定的键，但它不起作用。

App.js

import React, { Component } from 'react';
import './App.css';

import axios from 'axios';

import countries from '../../countriesList';
import CitySearchForm from './CitySearchForm/CitySearchForm';
import CityOutput from './CityOutput/CityOutput';
import ErrorMessage from './ErrorMessage/ErrorMessage';

class App extends Component {
 state = {
  country: '',
  error: false,
  cities: [],
  infoMessage: '',
  visible: false
 }

getCities = (e) => {
 e.preventDefault();

const countryName = e.target.elements.country.value.charAt(0).toUpperCase() + e.target.elements.country.value.slice(1);

const countryUrl = 'https://api.openaq.org/v1/countries';
const wikiUrl ='https://en.wikipedia.org/w/api.php?action=query&prop=extracts&exintro&explaintext&format=json&category=city&redirects&origin=*&titles=';
const allowedCountries = new RegExp(/spain|germany|poland|france/, 'i');

if (allowedCountries.test(countryName)) {
  axios
  .get(countryUrl)
  .then( response => {
    const country = response.data.results.find(el => el.name === countryName);
    return axios.get(`https://api.openaq.org/v1/cities?country=${country.code}&order_by=count&sort=desc&limit=10`)
  })
  .then( response => {
    const cities = response.data.results.map(record => {
      return { name: record.city };
    });
    cities.forEach(city => {
      axios
      .get(wikiUrl + city.name)
      .then( response => {
        let id;
        for (let key in response.data.query.pages) {
          id = key;
        }
        const description = response.data.query.pages[id].extract;
        this.setState(prevState => ({
          cities: [...prevState.cities, {city: `${city.name}`, description}],
          infoMessage: prevState.infoMessage = ''
        }))
      })
    })
  })
  .catch(error => { 
    console.log('oopsie, something went wrong', error)
  })
} else {
  this.setState(prevState => ({
    infoMessage: prevState.infoMessage = 'This is demo version of our application and is working only for Spain, Poland, Germany and France',
    cities: [...prevState.cities = []]
  }))
 }
}
descriptionTogglerHandler = () => {
 this.setState((prevState) => {
  return {  visible: !prevState.visible};
 });
};

render () {
return (
  <div className="App">
    <ErrorMessage error={this.state.infoMessage}/>
    <div className="form-wrapper">
      <CitySearchForm getCities={this.getCities} getInformation={this.getInformation} countries={countries}/>
    </div>
    {this.state.cities.map(({ city, description }) => (
      <CityOutput
      key={city} 
      city={city}
      description={description}
      show={this.state.visible}
      descriptionToggler={this.descriptionTogglerHandler} />
    ))}
  </div>
  );
 }
}

export default App;

CityOutput.js

import React, { Component } from 'react';

import './CityOutput.css';


class CityOutput extends Component {
 render() {
  const { city, descriptionToggler, description, show } = this.props;
  let descriptionClasses = 'output-record description'
  if (show) {
   descriptionClasses = 'output-record description open';
  }

 return (
  <div className="output">
    <div className="output-record"><b>City:</b> {city}</div>
    <button onClick={descriptionToggler}>Read more</button>
    <div className={descriptionClasses}>{description}</div>
  </div>
  )
 }
};

export default CityOutput;

Answer 1

将 visible 键和切换函数放在 CityOutput 中，而不是放在父级中

import React, { Component } from "react";

import "./CityOutput.css";

class CityOutput extends Component {
  state = {
    visible: true
  };

  descriptionTogglerHandler = () => {
    this.setState({ visible: !this.state.visible });
  };

  render() {
    const { city, description } = this.props;
    let descriptionClasses = "output-record description";
    if (this.state.visible) {
      descriptionClasses = "output-record description open";
    }

    return (
      <div className="output">
        <div className="output-record">
          <b>City:</b> {city}
        </div>
        <button onClick={() => this.descriptionTogglerHandler()}>Read more</button>
        <div className={descriptionClasses}>{description}</div>
      </div>
    );
  }
}

export default CityOutput;