Reactjs 在componentWillReceiveProps中接收新道具后如何比较和显示新道具

我正在尝试从

searchBarItems

组件接收新道具到

Pictures

组件中，并在

searchBarItems

组件中设置状态，以便我可以映射和显示新道具

到目前为止，

Pictures

组件已经能够在提交搜索时从父级接收道具。之后，我无法在

图片
组件中的
静态getDerivedStateFromProps
中比较前一个道具和下一个状态。它给出一个错误，说明
无法读取未定义的属性“setState”
。我尝试使用
componentWillReceiveProps
，结果出现错误
无法读取null的属性“map”

如何比较道具的差异，并在
defaultImages
中设置新状态，以便映射

App.js：

class App extends Component {

  constructor() {
    super();
    this.state = {
      enteredData: null
    }
  }


  enteredDatahandler = (ctp) => {
    this.setState({enteredData: ctp })
  }


  render() {
    return (
      <div className="App">
          <SearchBarItems ctpEnteredData={this.enteredDatahandler}/>
          <Pictures ptcEnteredData={this.state.enteredData}/>
      </div>
    );
  }
}

export default App

类应用程序扩展组件{
构造函数（）{
超级（）；
此.state={
输入数据：空
}
}
enteredDatahandler=（ctp）=>{
this.setState（{enteredData:ctp}）
}
render（）{
返回(
);
}
}
导出默认应用程序

图片.js

class Pictures extends Component {

  constructor(props) {
    // console.log(props)
    super(props);
    this.state = {
      defaultImages: []
    }
  }


  componentDidMount() {
    unsplash.search.collections("row", 3, 60)
    .then(toJson)
    .then(json => {
      this.setState({ defaultImages:json.results });
    });
  }


  //*********** Receive new Props ***********
  static getDerivedStateFromProps(nextProps, prevState) {

    console.log(nextProps.ptcEnteredData); //success
    console.log(prevState.defaultImages); //success
    // if(nextProps.ptcEnteredData !== prevState.defaultImages ) {
    //   this.setState({ defaultImages:nextProps.ptcEnteredData }) 

    //commented out code above gives an error that says Cannot read property 'setState' of undefined 

    // return {defaultImages: nextProps.ptcEnteredData}; //Cannot read property 'map' of null
     // }
    }






  // componentWillReceiveProps (nextProps) {
  //     this.setState({ defaultImages:nextProps.ptcEnteredData });
  //   } //Cannot read property 'map' of null
 //*****************************************


  render() {
    const pictures = this.state.defaultImages;
    const listItemsPictures = pictures.map((picture, index) =>
      picture.preview_photos.map((picobj,i)=> {
        return (
          <Picture key={picobj.id} pictureobj={picobj}/>
        )
      })
    )


    return (
      <div>
          {listItemsPictures}
      </div>
    )
  }
}

export default Pictures

类图片扩展组件{
建造师（道具）{
//控制台日志（道具）
超级（道具）；
此.state={
默认图像：[]
}
}
componentDidMount（）{
unsplash.search.collections（“行”，3，60）
.然后（toJson）
。然后（json=>{
this.setState（{defaultImages:json.results}）；
});
}
//***********接受新道具***********
静态getDerivedStateFromProps（下一步，上一步）{
console.log（nextrops.ptcenteredata）；//成功
console.log（prevState.defaultImages）；//成功
//如果（nextrops.ptcEnteredData！==prevState.defaultImages）{
//this.setState（{defaultImages:nextProps.ptcEnteredData}）
//上面注释掉的代码给出了一个错误，表示无法读取未定义的属性“setState”
//返回{defaultImages:nextrops.ptcEnteredData}；//无法读取null的属性“map”
// }
}
//组件将接收道具（下一步）{
//this.setState（{defaultImages:nextProps.ptcEnteredData}）；
//}//无法读取null的属性“map”
//*****************************************
render（）{
const pictures=this.state.defaultImages；
const listItemsPictures=pictures.map（（图片，索引）=>
图片。预览图片。地图（（picobj，i）=>{
返回(
)
})
)
返回(
{listItemsPictures}
)
}
}
导出默认图片

SearchBarItems.js：

class SearchBarItems extends Component {

  constructor() {
    super();
    this.state = {
      searchImagebox: '',
      searchImageData: null
     }
  }



  enterKeyHandler = (event) => {
    if (event.key === 'Enter'){
    event.preventDefault();
       unsplash.search.collections(this.search.value, 1, 60)
        .then(toJson)
        .then(json => {
            this.props.ctpEnteredData(json.results);            
      });
     }
   }


 render() {
   return (
     <div>
        <form autoComplete="off">
        <input 
          type="text" 
          name="search" 
          placeholder="Search.." 
          ref={input => this.search = input}
          onKeyPress={this.enterKeyHandler}/>
        </form>
    </div>  
    )
  }
}



export default SearchBarItems

class SearchBarItems扩展组件{
构造函数（）{
超级（）；
此.state={
searchImagebox:“”，
searchImageData:空
}
}
enterKeyHandler=（事件）=>{
如果（event.key=='Enter'）{
event.preventDefault（）；
unsplash.search.collections（this.search.value，1,60）
.然后（toJson）
。然后（json=>{
this.props.ctpenteredata（json.results）；
});
}
}
render（）{
返回(
this.search=input}
onKeyPress={this.enterKeyHandler}/>
)
}
}
导出默认搜索项

根据建议，不建议使用组件WillReceiveProps

如果您要将状态更新置于“组件将接收道具””或“组件DIDDUPDATE”中，则很可能您正在执行错误或误解的状态/道具工作流

解决方案：

render() {
        const pictures = this.props.ptcEnteredData || this.state.defaultImages;
        const listItemsPictures = pictures.map((picture, index) =>
        ...
render（）{
const pictures=this.props.ptcEnteredData | | this.state.defaultImages；
const listItemsPictures=pictures.map（（图片，索引）=>
...

如果您从父组件（props）获得ptcEnteredData，则使用它，否则使用defaultImages。
您根本不需要组件将接收道具方法