Question

我正在尝试在获取的API数组上映射以分离具有相同名称的单个项，并基于该单个项属性设置setState。例如，数组返回具有不同纬度和经度的多个不同项。我可以使用render函数内onClick中的函数来设置setState，但是我知道这是不好的做法。我试过将函数移到渲染之外，并使用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

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

1 个答案: