如何将渲染函数之外的数组映射到setState？

Question

我正在尝试映射一个已获取 API 的数组以分隔具有相同名称的单个项目，并根据该单个项目属性设置状态。例如，该数组返回多个具有不同纬度和经度的不同项目。我可以使用渲染函数内的 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>
))
)}}

谢谢

Answer 1

这是您可以将 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