Как отобразить массив вне функции рендеринга для setState? - PullRequest
Новая
       42

Как отобразить массив вне функции рендеринга для setState?

0 голосов
/ 17 февраля 2019

Я пытаюсь отобразить массив извлеченного API, чтобы отделить отдельные элементы с одинаковыми именами, и setState на основе этого отдельного свойства элемента.Например, массив возвращает несколько разных элементов с разными широтами и долготами.Я могу установить setState с помощью функции onClick внутри функции рендеринга, однако я знаю, что это плохая практика.Я попытался переместить функцию за пределы рендера и использовать onClick = {this.functionName}, но это приводит к странному поведению.Что я делаю не так?

вот функция, которую я создал вне рендера: 

 mapItem = () => {
    const parks = [...this.state.parks];
    parks.map(item =>
      this.setState({
        lat: item.latitude,
        lng: item.longitude,
        zoom: 16
      })
    );
  };

  render() {
    return (<h2 onClick={this.mapItem}>{item.name}</h2>)
    }

это работает: 

render() {
const { parks } = this.state;
    return(
{parks.map(item => (
<h2 onClick={() => this.setState({lat: item.latitude, 
             lng: item.longitude, zoom: 16})
             }>{item.name}</h2>
))
)}}

спасибо

1 Ответ

0 голосов
/ 17 февраля 2019

Вот как вы можете переместить обработчик события onClick за пределы render(): 

  handleClick = item => {
    this.setState({
      lat: item.latitude,
      lng: item.longitude,
      zoom: 16
    })
  }

  render() {
    const { parks } = this.state

    return (
      <>
        {parks.map(item => (
          <h2
            onClick={() => {
              this.handleClick(item)
            }}
          >
            {item.name}
          </h2>
        ))}
      </>
    )
  }

Если вы пытаетесь избежать каких-либо встроенных функций в render() (потому что каждый рендер будетсоздайте новый экземпляр этой функции), затем вам нужно будет создать отдельный компонент для каждого элемента parks: 

// ParkItem functional component
const ParkItem = ({item}) => {
  const handleClick = () => {
    this.props.setCoordinate({
      lat: item.latitude,
      lng: item.longitude,
      zoom: 16
    })
  }

  return <h2 onClick={handleClick}>{item.name}</h2>
}

class YourCurrentClass extends Component {
  setCoordinate = stateObj => {
    this.setState(stateObj)
  }

  render() {
    const { parks } = this.state

    return (
      <>
        {parks.map(item => (
          <ParkItem item={item} />
        ))}
      </>
    )
  }
}

export default YourCurrentClass
...