如何通过父组件中的点击事件更新子组件中的数据

Question

我是 reactjs 的新手。我有一个带有按钮列表的父组件和带有地图的子组件。通过单击按钮，我想将坐标传递给子组件，但我一直在尝试更新地图组件内的数据。

具有按钮单击事件的父组件更新状态并将该状态传递给 Map 组件。

class Parent extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            data: [],
        };
        this.handleClick = this.handleClick.bind(this);
    }

    handleClick(data){
        this.setState({data: data});
    }

    render() {
        return(
            <div>
                <div>
                    <ul>
                        {list.map( data => (
                            <li key={}>
                                <button                                 
                                    type="button" 
                                    onClick={() => this.handleClick(data)} >
                                </button>
                            </li>
                        ))}
                    </ul>
                </div>
                <div>
                    <Map data={this.state.data} />
                </div>    
            </div>
        )
    }
}  

具有 MapComponent 函数的子地图组件不会从更新状态中获取数据。

class Map extends React.Component {
    constructor(props) {
        super(props);
        this.state={
            data: []
        };
    }

    componentDidMount() {
        this.setState({data: this.props.data});
    }

    render() {
        return (
            <MapContainer zoom={6}>
                <MapComponent data={this.state.data} />
            </MapContainer>
        );
    }
}

function MapComponent(data) {
    console.log(data);
    return null;
}

Answer 1

因为你设置了一次数据，你必须再次设置

在您的 Map 类中使用此方法

componentWillReceiveProps(nextProps) {
    this.setState(nextProps);
}