javascript - getDerivedStateFromProps，在改变 Prop 的影响下改变状态

Question

我点击 Item -> 我从 url:https://app/api/v1/asset/${id} 获取数据。数据保存在 loadItemId 中。我正在将 loadItemId 从组件 Items 移动到组件 Details，然后移动到组件 AnotherItem。每次我单击 Item 时， Prop loadItemId 都会在 getDerivedStateFromProps 方法中发生变化。问题:我将单击 Element D -> 我在 console.log 中看到“true”，然后我将单击 Element E --> 它显示在 console.log 中true和false同时显示，应该只显示false。

尝试创建一个三元运算符 {this.state.itemX ['completed'] ？ this.start () : ''}.如果{this.state.itemX ['completed']调用函数this.start()

代码在这里:stackblitz

图片:https://imgur.com/a/OBxMKCd

项目

class Items extends Component {
  constructor (props) {
    super(props);
    this.state = {   
      itemId: null,  
      loadItemId: ''
    }
  }

  selectItem = (id) => {
    this.setState({
      itemId: id
    })

        this.load(id);
  }

    load = (id) => {

        axios.get
            axios({
                    url: `https://app/api/v1/asset/${id}`,
                    method: "GET",
                    headers: {
                        'Authorization': `Bearer ${token}`           
                    }
            })
            .then(response => {
                    this.setState({
                            loadItemId: response.data
                    });
            })
            .catch(error => {
                    console.log(error);
            })
}

  render () {
    return (
            <div > 
                <Item
                    key={item.id}
                    item={item}
                    selectItem={this.selectItem}
                >
                <Details
                    loadItemId={this.state.loadTime}  
                /> 
            </div>
    )
  }

---

项目

class Item extends Component {
  render () {

    return (
      <div  onClick={() => this.props.selectItem(item.id}>

      </div>
    )
  } 
}

---

详情

class Details extends Component {
    constructor() {
        super();
    }

  render () {
    return (
            <div> 
                <AnotherItem 
                    loadItemId = {this.props.loadItemId}        
                />       
            </div>
    )
  } 
}

---

另一个项目

class AnotherItem extends Component {


  constructor() {
    super();

    this.state = {
      itemX: ''
    };
  }


  static getDerivedStateFromProps(nextProps, prevState) {
    if(nextProps.loadItemId !== prevState.loadItemId) {
      return { itemX: nextProps.loadItemId }
    }

  render () {
      console.log(this.state.itemX ? this.state.itemX['completed'] : '');

    {/*if this.state.loadX['completed'] === true, call function this.start()*/ }
    return (
            <button /*{this.state.loadX['completed'] ? this.start() : ''}*/ onClick={this.start}>
                Start
            </button>      
    );
  }
}

Answer 1

这里:

selectItem = (id) => {
    this.setState({
        itemId: id
    })

    this.load(id);
}

您调用 setState()，然后“Item”、“Details”和“AnotherItem”调用它们的渲染方法。所以您会看到之前“loadItemId”的日志。

当“加载”方法完成时。这里:

 this.setState({
     loadItemId: response.data
 });

您再次 setState()，然后“Item”、“Details”和“AnotherItem”再次调用它们的渲染方法。此时您会看到新“loadItemId”的日志。

---

解决方案

setState 将两种状态放在一处。加载方法完成后，而不是:

 this.setState({
     loadItemId: response.data
 });

写:

 this.setState({
     itemId: id,
     loadItemId: response.data
 });

---

并删除:

this.setState({
  itemId: id
})

来自“selectItem”方法。