为什么我的反应组件不更新状态更新？

我有一个地图应用程序，我建立了一个按钮按下后需要一些地图图标出现/消失，但我无法弄清楚如何设置它来重新渲染组件，当我从它传入一个新的运动属性父母组件：为什么我的反应组件不更新状态更新？

家长负载组件：

<SimpleMap sports=[default value and future values go here] />

简单的地图组件（简体）：

constructor(props) { 
    (props); 
    this.state = { 
    events: [{venue: {lat: 2, lon: 1}}], 
    sports: ["baseball", "football", "paddle", "soccer", "boxing", "dart", "biking", "golf", "hockey", "inline-skating", "tennis", "volleyball", "skateboard", "kickball", "bowling", "pool", "ride", "hike", "ice-skating"] 
    }; 
}; 

componentWillReceiveProps (nextProps) { 
    this.setState({events: [{venue: {lat: 2, lon: 1}}], 
        sports: nextProps.sports}); 
    console.log(nextProps.sports); 
} 

static defaultProps = { 
    center: {lat: 36.160338, lng: -86.778780}, 
    zoom: 12, 
    sports: ["baseball", "football", "paddle", "soccer", "boxing", "dart", "biking", "golf", "hockey", "inline-skating", "tennis", "volleyball", "skateboard", "kickball", "bowling", "pool", "ride", "hike", "ice-skating"], 
}; 

makeMapEvents (insertProps) { 
    fetch("./json/meetup.json").then((response) => { 
    return response.json() 
    }).then((response) => { 
    /* eventually returns new events object based on insertProps */ 
    this.setState({events: response}); 
    } 
}; 

componentDidMount() { 
    this.makeMapEvents(this.state.sports); 
    console.log("mounted", this.state.sports); 
}

最终结束了在这里的状态映射事件：

<GoogleMap> 
    {this.state.events.map((result) => { 
    return (<Marker key={counter++} lat={result.venue.lat} lng={result.venue.lon} 
       sport={this.props.sport} data={result}/>); 
    })} 
</GoogleMap>

来源

2016-07-05 deek

如果定义了'counter'变量？另外，你几乎从不使用索引值作为React中的'key'属性。始终为每个循环渲染的组件使用唯一的标识符，否则，当项目被删除或重新排序时，您可能会遇到奇怪的行为。 –

它在其他地方定义。我简化了它。这只是一个数字。谢谢你的提示。 – deek

阵营ES6类不通过默认autobind this非反应基构件的方法。因此，函数makeMapEvents中this的上下文未正确绑定。有两种方法来解决这个问题：

通过ES7属性初始化：

makeMapEvents = (insertProps) => { 
    fetch("./json/meetup.json").then((response) => { 
    return response.json() 
    }).then((response) => { 
    /* eventually returns new events object based on insertProps */ 
    this.setState({events: response}); 
    }) 
};

通过在构造函数结合：

constructor(props) { 
    (props); 
    this.state = { 
    events: [{venue: {lat: 2, lon: 1}}], 
    sports: ["baseball", "football", "paddle", "soccer", "boxing", "dart", "biking", "golf", "hockey", "inline-skating", "tennis", "volleyball", "skateboard", "kickball", "bowling", "pool", "ride", "hike", "ice-skating"] 
    }; 

    this.makeMapEvents = this.makeMapEvents.bind(this) // << important line 


}

来源

2016-07-14 18:22:12

.then((response) => { 
    this.setState({events: resp}); 
}

你把参数response然后尝试使用resp其心不是你想要的变量。

来源

2016-07-05 09:50:19 krs

对不起，他们是我错过了一个错字，并删除了不必要的代码。它原来是正确的，而不是问题（取Ajax代码工作正常）。 – deek

可能的原因是您拨打this.setState()时makeMapEvents()函数未提供this的正确词汇值，导致您的代码无法正常工作。改变makeMapEvents()功能定义中使用Arrow功能（() => {}），并提供正确的词汇结合的这个作为值：

makeMapEvents = (insertProps) => { 
    fetch("./json/meetup.json").then((response) => { 
    return response.json() 
    }).then((response) => { 
    this.setState({events: response}); 
    }); // <-- Typo here. The closing parenthesis is missing 
};

也有是在代码中一个错字，其中如图上述评论右括号丢失

来源

2016-07-08 04:52:44

这是以es6类作为组件的Reactjs。 makeMapEvents =（insertProps）=> {引发语法错误 – deek

您正在混合组件中的道具和状态。运动应该只是道具，它不应该处于状态，因为它是从父组件传入的。

constructor(props) { 
    (props); 
    this.state = { 
    events: [{venue: {lat: 2, lon: 1}}] <== removed sports here, it didn't belong 
}; 

componentWillReceiveProps (nextProps) { 
    this.setState({events: [{venue: {lat: 2, lon: 1}}], 
        sports: nextProps.sports}); 
    console.log(nextProps.sports); 
} 

static defaultProps = { 
    center: {lat: 36.160338, lng: -86.778780}, 
    zoom: 12, 
    sports: ["baseball", "football", "paddle", "soccer", "boxing", "dart", "biking", "golf", "hockey", "inline-skating", "tennis", "volleyball", "skateboard", "kickball", "bowling", "pool", "ride", "hike", "ice-skating"], 
}; 

makeMapEvents (insertProps) { 
    fetch("./json/meetup.json").then((response) => { 
    return response.json() 
    }).then((response) => { 
    /* eventually returns new events object based on insertProps */ 
    this.setState({events: response}); 
    } 
}; 

componentDidMount() { 
    this.makeMapEvents(this.props.sports); <== changed to props.sports 
    console.log("mounted", this.props.sports); <== changed to props.sports 
}

来源

2016-07-08 05:50:48

为什么我的反应组件不更新状态更新？

回答

相关问题