ReactJS 中的组件状态

Question

首先，我是 ReactJS 的新手。我想在我的 MapComponent 中显示标记。我完成了这项工作，但老实说，我认为应该有更好的方法来做到这一点...... 我从我的父组件获取道具，它们是从 JSON 加载的。我想将每个项目（从我的 JSON）的坐标传递到我的 MapComponent 中的状态标记中。我对 google 地图使用了 react-google-maps 解决方案。也许有人可以给我一些建议，在这种情况下最好的方法是什么？非常感谢任何提示！

export class MapComponent extends React.Component {

  constructor(props) {
    super(props)
    this.state = {
        markers: []
    }
  }


  getMarkers() {
    if (this.props.data.rows) {
      var markers = this.props.data.rows.map(function(item, i) {
        return {
          position: {
            lat: item.coordinate[0],
            lng: item.coordinate[1]
          },
          item: item
        }
      });
      this.setState({
        markers: markers
      });
    }
  }
  shouldComponentUpdate(nextProps, nextState) {
    return true;
  }
  componentDidUpdate() {
    this.getMarkers();
  }

  render() {
    return (
      <div className={styles.map}>
      <GoogleMapLoader
        containerElement={
          <div
            {...this.props}
            style={{
              height: "100%",
            }}
          />
        }
        googleMapElement={
          <GoogleMap
            ref={(map) => console.log(map)}
            defaultZoom={9}
            defaultCenter={{lat: 52.379189, lng: 4.899431}}>
            {this.state.markers.map((marker, index) => {
              return (
                <Marker
                {...marker}
                />
              );
            })}
          </GoogleMap>
        }
      />
      </div>
    );
  }
}

Answer 1

由于您是通过 props 传递状态的，因此您可以创建一个 组件 class，实际上您只需要一个简单的 代表性组件，它从 0.14 开始支持（我猜）。这个代表组件只是函数，代表render函数。此函数将 props 作为参数

所以你的组件看起来会更干净：

const MapComponent = (props) => {
  return (
    <div className={styles.map}>
      <GoogleMapLoader
        containerElement={
          <div
            {...props}
            style={{height: "100%"}}
          />
        }
        googleMapElement={
          <GoogleMap
            ref={(map) => console.log(map)}
            defaultZoom={9}
            defaultCenter={{lat: 52.379189, lng: 4.899431}}>
              {props.data.rows.map((item, index) => {
                const position = {
                  lat: item.coordinate[0],
                  lng: item.coordinate[1]
                };

                return (
                  <Marker
                    key={index}
                    position={position}
                    item={item}
                  />
              );
            })}
          </GoogleMap>
        }
      />
    </div>);
}

Answer 2

首先，正如@webdeb 所说，最好使用 props 发送正确的数据。状态的使用导致不必要的组件重绘。其次，如果由于某种原因你需要像你描述的那样处理道具和状态，componentDidUpdate 方法不适合这个目的，你应该用 componentWillReceiveProps

替换它

类似于：

import React, {Component} from 'react';
export class MapComponent extends Component {

    constructor(props) {
      super(props)
      this.state = {
          markers: []
     }
    }
    componentDidMount() {
        this.getMarkers(this.props);
    }
    componentWillReceiveProps(nextProps){
        if(this.props.data!==nextProps.data){
            const markers = this.getMarkers(nextProps);
            this.setState({
               markers: markers
            });
        }
    }

    getMarkers(props) {
        let markers = [];
        if (props.data.rows) {
            markers = props.data.rows.map(function(item, i) {
              return {
                 position: {
                   lat: item.coordinate[0],
                   lng: item.coordinate[1]
                 },
                 item: item
              }
           });

        } 
        return markers;
     }
 }

ReactJS 中的组件状态

Component state in ReactJS

javascript

frontend

reactjs