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

我有个问题。我想搜索基于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;

class CarPage扩展组件{
状态={
孤岛加载：是的，
carData:[]，
id:null
}
findMyIndex=（）=>{
这是我的国家({
id:this.carData.indexOf（this.props.brand），
})
}
componentDidUpdate（）{
this.findMyIndex（）
}
componentDidMount（）{
获取（“/data.json”）
.then（response=>response.json（））
。然后（数据=>{
这是我的国家({
卡达：数据，
孤岛加载：false，
})
})
}
render（）{
返回(
{！this.state.isLoading&&(
{this.state.carData[this.state.id].model}

)}
);
}
}
导出默认车位；

您根本不需要

组件diddupdate

生命周期方法。您可以这样做：

 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;

class CarPage扩展组件{
状态={
孤岛加载：是的，
carData:[]，
id:null
}
findMyIndex=（）=>{
返回this.state.carData.map（el=>el.brand.indexOf（this.props.brand）；
}
componentDidMount（）{
获取（“/data.json”）
.then（response=>response.json（））
。然后（数据=>{
这是我的国家({
卡达：数据，
孤岛加载：false，
})
})
}
render（）{
返回(
{！this.state.isLoading&&(
{this.state.carData[this.findMyIndex（this.props.brand）].model}

)}
);
}
}
导出默认车位；

---

似乎

findMyIndex

返回

-1

并且

this.state.carData[this.state.id]

等于

未定义的
。检查CarData是否确实有
this.props.brand
条目。
this.CarData=>this.state。carData@mokk我修复了此问题：无法读取未定义：行的属性“model”32@DARKVerbalCentaurPL，在尝试访问carData[this.state.id].model之前，必须检查carData数组长度，因为在第一次渲染时empty@NikitaMazur我应该在哪里检查？在渲染或在任何函数，渲染，和任何其他函数中，也考虑转换为功能组件并使用回调钩子。代码看起来简单得多，但是当我粘贴它时，它返回：“Type Error：不可读取属性”的“未定义”模型。因此，我检查了数据是否在从
中删除所有内容后加载，并加载了数据。我将每个组件粘贴到CodePen中，包括data.json。你能看一下吗？也不确定，但可能道具品牌在data.json中存在品牌问题。
this.props.brand
看起来怎么样？那么
this.props.brand
作为
来自App.js，然后转到Container.js，其中
const Container=（{match}）=>{return（）；}
和
this.props.brand
是
brand={match.params.brand}
这正是
http://localhost:3000/Lorem0
好的，那么您似乎忘记了将对象映射到其品牌。我已经更新了代码，请现在查看。