React.js如何正确使用componentDidMount和componentDidUpdate？

Question

我有问题。我想搜索基于 url 的索引。一切都按原样发送到组件，但加载后出现错误：

无法读取未定义的属性'indexOf'

从JSON发送的数据一定能正确发送和接收并正确分配。该问题很可能是由于 'componentDidMount' 和 'componentDidUpdate' 应用不当造成的。它应该如何正确显示？

根据页面URL发送的数据为'this.props.brand'

代码：

class CarPage extends Component {
   state = {
       isLoading: true,
       carData: [],
       id: null
   }
   findMyIndex = () => {
       this.setState({
           id: this.carData.indexOf(this.props.brand),
       })
   }
   componentDidUpdate() {
       this.findMyIndex()
   }
   componentDidMount() {
       fetch("/data.json")
           .then(response => response.json())
           .then(data => {
               this.setState({
                   carData: data,
                   isLoading: false,
               })
           })

   }
   render() {
       return (
           <>
               {!this.state.isLoading && (
                   <p>{this.state.carData[this.state.id].model}</p>
               )}
           </>
       );
   }
}

export default CarPage;

Answer 1

您根本不需要 componentDidUpdate 生命周期方法。你可以这样做：

 class CarPage extends Component {
   state = {
       isLoading: true,
       carData: [],
       id: null
   }
   findMyIndex = () => {
       return this.state.carData.map(el => el.brand).indexOf(this.props.brand);
   }
   componentDidMount() {
       fetch("/data.json")
           .then(response => response.json())
           .then(data => {
               this.setState({
                   carData: data,
                   isLoading: false,
               })
           })

   }
   render() {
       return (
           <>
               {!this.state.isLoading && (
                   <p>{this.state.carData[this.findMyIndex(this.props.brand)].model}</p>
               )}
           </>
       );
   }
}

export default CarPage;

好像findMyIndexreturns-1和this.state.carData[this.state.id]等于undefined。检查 CarData 是否确实有 this.props.brand 条目。

React.js如何正确使用componentDidMount和componentDidUpdate？

How to correctly use componentDidMount and componentDidUpdate in React.js?

javascript

json

indexof

reactjs

react-props