getDerivedStateFromProps is lifecycle hook introduced with React 16.3 and intended as a replacement for componentWillReceiveProps. It is invoked after a component is instantiated as well as when it receives new props. It should return an object to update state, or null to indicate that the new props do not require any state updates.

import React, { Component, Fragment } from "react";

class FetchJson extends Component {
state = {
url: null,
data: null,
isLoading: true
}; static getDerivedStateFromProps(nextProps, prevState) {
console.log("getDerivedStateFromProps", nextProps);
if (prevState.url !== nextProps.url) {
return {
url: nextProps.url,
data: null,
isLoading: true
};
} return null;
} fetchAndUpdate = async () => {
const url = this.state.url;
const response = await fetch(url);
const result = await response.json();
this.setState(state => {
return { data: result, isLoading: false };
});
}; componentDidMount() {
this.fetchAndUpdate();
} componentDidUpdate() {
if (this.state.isLoading) {
this.fetchAndUpdate();
}
} render() {
return <Fragment>{this.props.render(this.state)}</Fragment>;
}
} export default FetchJson;

[React] Update State Based on Props using the Lifecycle Hook getDerivedStateFromProps in React16.3的更多相关文章

  1. React & update state with props & Object.assign

    React & update state with props & Object.assign Object.assign({}, oldObj, newObj) https://re ...

  2. [React] Update State in React with Ramda's Evolve

    In this lesson we'll take a stateful React component and look at how we can refactor our setState ca ...

  3. React 深入系列3:Props 和 State

    文:徐超,<React进阶之路>作者 授权发布,转载请注明作者及出处 React 深入系列3:Props 和 State React 深入系列,深入讲解了React中的重点概念.特性和模式 ...

  4. react 中state与props

    react 中state与props 1.state与props props是只读属性,只有在组件被实例化的时候可以赋值,之后的任何时候都无法改变该值.如果试图修改该值时,控制台会报错 only re ...

  5. react设置默认state和默认props

    1.默认状态设置 1.constructor (ES6) constructor(props) { this.state = { n: ... } } 2.getInitialState (ES5) ...

  6. React中state与props介绍与比较

    一.state 1.state的作用 state是React中组件的一个对象.React把用户界面当做是状态机,想象它有不同的状态然后渲染这些状态,可以轻松让用户界面与数据保持一致. React中,更 ...

  7. react --- React中state和props分别是什么?

    props React的核心思想就是组件化思想,页面会被切分成一些独立的.可复用的组件. 组件从概念上看就是一个函数,可以接受一个参数作为输入值,这个参数就是props,所以可以把props理解为从外 ...

  8. [React] Update Component State in React With Ramda Lenses

    In this lesson, we'll refactor a React component to use Ramda lenses to update our component state. ...

  9. React中state和props分别是什么?

    整理一下React中关于state和props的知识点. 在任何应用中,数据都是必不可少的.我们需要直接的改变页面上一块的区域来使得视图的刷新,或者间接地改变其他地方的数据.React的数据是自顶向下 ...

随机推荐

  1. element快速开发建站的动态UI------优

    网站快速成型工具 只为这样的你:  Element,一套为开发者.设计师和产品经理准备的基于 Vue 2.0 的组件库,提供了配套设计资源,帮助你的网站快速成型 http://element.elem ...

  2. html5小知识点

    1.兼容性问题: 对于不支持H5标签的浏览器,可以使用javascript来解决他们.然后在样式表中对这些标签定义一下默认的display:block. 采用第三方库:html5shiv.js < ...

  3. SnackDown Online Qualifier 2017

    好久没做题了,然后就想着随便做一个.无奈cf都是晚上,然后就看见这个,随便做做. 资格赛,只要做出来1题就行了,4天的时间. 1. 水题 #include <iostream> #incl ...

  4. A - Supermarket

    Problem description We often go to supermarkets to buy some fruits or vegetables, and on the tag the ...

  5. 项目平台统一(前后端IDE、代码风格)

    项目平台统一(前后端IDE.代码风格) 记录人:娄雨禛 前端:Webstorm(HTML+CSS+JavaScript) 后端:IntelliJ IDEA(Java) 代码风格:Java风格代码 代码 ...

  6. Assembly之instruction之Indirect Autoincrement Mode

    Assembler Code Content of ROMMOV @R10+,0(R11)   MOV @R10+,0(R11) Length: One or two words Operation: ...

  7. 点云处理软件Pointscene

    转载于PCL中国:点云处理软件Pointscene 软件官网:https://pointscene.com/ 笔者评:        Pointscene是目前的点云处理软件之一,其主要是操作简单直观 ...

  8. 【sqli-labs】 less37 POST- Bypass MYSQL_real_escape_string (POST型绕过MYSQL_real_escape_string的注入)

    POST版本的less36 uname=1&passwd=1%df' or 1#

  9. 作业08之《MVC实现用户权限》

    1. 赋给用户一个userid,在用户角色表将用户和角色关联起来,在角色权限表中将角色和权限对应起来,权限表中存储的是左边菜单栏的名称. 2. 在判断权限时,通过用户的userid,获取其角色id,然 ...

  10. What is the difference between PKCS#5 padding and PKCS#7 padding

    The difference between the PKCS#5 and PKCS#7 padding mechanisms is the block size; PKCS#5 padding is ...