javascript - 从 props react 传递列表到状态

Question

我有两个组件。 map 和 LfMap。

import React, { Component } from 'react';
import { LfMap } from '../../components/Localisation/LfMap';


export class Map extends Component {
    constructor(props) {
        super(props);

        this.state = {
            dev: [],
        };
    }
    componentDidMount() {
        fetch("URL")
        .then(resp => resp.json())
        .then(pas => this.setState({dev: pas}));
    }

    render() {

        return(
            <React.Fragment>
                <LfMap list={this.state.dev}/>
            </React.Fragment>
        );
    }
}

import React from 'react';
import { Map, CircleMarker, TileLayer, Polyline} from "react-leaflet";
import "leaflet/dist/leaflet.css";
import Control from 'react-leaflet-control';

class LfMap extends React.Component {
    constructor(props) {
        super(props);

        this.state = {
            devices: this.props.list,
        }
    }

    render() {

        return(
        <React.Fragment>
            <Map
            style={{ height: "480px", width: "100%" }}
            zoom={12}
            center={[22.22, 21.00]}
            >
                <TileLayer url="http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png" />
            </Map>
        </React.Fragment>
        );
    }
}

export { LfMap };

我正在将一个包含我的对象列表的 Prop 列表传递给 LfMap。

但是当我尝试 console.log(this.state.devices) 时它显示未定义但它应该控制我在其他组件中获取的对象列表。为什么会这样？

Answer 1

为什么要设置 state = props ？是一个反模式，您应该在其他组件中继续使用 this.prop.list。

这样做:

console.log(this.props.list)

它会打印 []，然后当结果出现时它会打印整个数组。

当你需要使用这个数组时，总是使用 this.props.list。

根据您在此处的评论，您是如何解决该问题的:在父级添加一个函数

listUpdate(newList){
 this.setState({
    list: newList
})
}

然后你把这个函数传给 child

 <LfMap list={this.state.dev} listUpdate={this.listUpdate}/>

当你需要更新它时，你需要调用this.props.listUpdate。始终更新 props :) 这就是引用所在的位置，这是您应该遵循的模式。