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

Question

我正在尝试映射一个获取的数组 API 以分隔具有相同名称的单个项目，并基于该单个项目属性设置状态。例如，数组 returns 多个具有不同纬度和经度的不同项目。我可以在渲染函数内的 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() 中的任何内联函数（因为每次渲染都会创建该函数的一个新实例），那么您必须为每个 [=14= 创建一个单独的组件]的项目：

// 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

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

How to map array outside of render function to setState?

onclick

setstate

reactjs

array.prototype.map