Reactjs componentDidUpdate在第一次渲染时被调用，尽管任何东西都不会'；不变 我想做什么

当

状态

发生变化时，我想从API获取数据并将其设置为

状态

问题

---

当我加载页面时，

componentdiddupdate

会自动发出，尽管没有任何更改，这是初始呈现。

我是

反应的初学者。
当我输入一些数据和
state
changes时，我想从API获取数据。
然而，当我加载一个页面时，我得到了一个错误，
无法定义未定义的属性映射。
显然，在第一次呈现页面时，出于某些原因调用了
componentdiddupdate
。
事实上，我将
prevState.line
与
this.state.line
进行了比较，然后发现
prevState.line
未定义

我的意思是，
componentdiddupdate
是在
之前发出的。
是
this.state.line的初始值
被设置为
this.state.line

我只想阻止最初调用
componentdiddupdate
。
如果你知道这样做的方法，我想让你告诉我，为什么会这样

多谢各位

============================================================

我的代码是这样的

class User_Add_PickUp_Form extends Component {
  constructor(props) {
    super(props);
    this.state = {
      owner: this.props.loginUser,
      lines: '',
      stations: '',
      textInput: '',
      allLines: '',
      allStations: '',
    };
    this.handleChange = this.handleChange.bind(this);
  }

  spreadAndSetState = (key, value) => {
    this.setState({ ...this.state, [key]:value });
  };

  componentDidMount() {
    console.log('Original is ' + this.state.lines)
    axios
      .get('http://express.heartrails.com/api/json?method=getLines&prefecture=TOKYO')
      .then((res) => {
        console.log(res.data)
        this.setState({ allLines: res.data.response.line })
      })
      .catch((err) => console.log(err));
  }

  componentDidUpdate(prevState){
    console.log(prevState)
    console.log(this.state)
    if(prevState.lines != this.state.lines){
      axios.get('http://express.heartrails.com/api/json?method=getStations&line=' + this.state.lines)
      .then((res)=> {
        //
        // res.data.response.stations is going to be an array
        // 
        res.data.response.station.map((station) => {
        this.spreadAndSetState(this.state.allStations, station.name)
        })
      })
    }
  }

  handleChange = (e) => {
    const name = e.target.name;
    const value = e.target.value;

    this.spreadAndSetState(name,value)
  };

  render() {
    const { owner, lines, stations, textInput, allLines, allStations } = this.state;
    if (allLines === '') {
      return <CircularProgress />;
    } else {
      return (
        <div>
          <h2>Add Pickup Places</h2>
          <select name="lines" onChange={this.handleChange}>
            <option value="">Choose a line</option>
            {allLines.map((line) => {
              return <option value={line}>{line}</option>;
            })}
          </select>
          <select name="lines" onChange={this.handleChange}>
            <option value="">Choose a station</option>
            {allLines.map((line) => {
              return <option value={line}>{line}</option>;
            })}
          </select>
        </div>
      );
    }
  }
}

类用户添加表单扩展组件{
建造师（道具）{
超级（道具）；
此.state={
所有者：this.props.login用户，
行：“”，
电台：''，
文本输入：“”，
所有行：“”，
所有电台：''，
};
this.handleChange=this.handleChange.bind（this）；
}
spreadAndSetState=（键，值）=>{
this.setState（{…this.state，[key]：value}）；
};
componentDidMount（）{
console.log（'Original is'+this.state.line）
axios
.get（'http://express.heartrails.com/api/json?method=getLines&prefecture=TOKYO')
。然后（（res）=>{
console.log（res.data）
this.setState（{allLines:res.data.response.line}）
})
.catch（（err）=>console.log（err））；
}
componentDidUpdate（prevState）{
console.log（prevState）
console.log（this.state）
if（prevState.lines！=此.state.lines）{
axios.get（）http://express.heartrails.com/api/json?method=getStations&line=“+this.state.lines）
。然后（（res）=>{
//
//res.data.response.stations将成为一个数组
// 
res.data.response.station.map（（station）=>{
this.spreadSetState（this.state.allStations，station.name）
})
})
}
}
handleChange=（e）=>{
const name=e.target.name；
常量值=e.target.value；
this.spreadAndSetState（名称、值）
};
render（）{
const{owner，line，stations，textInput，allLines，allStations}=this.state；
如果（所有行==''）{
返回；
}否则{
返回(
增加接送地点
选一行
{allLines.map（（line）=>{
返回{line}；
})}
选站
{allLines.map（（line）=>{
返回{line}；
})}
);
}
}
}
componentdiddupdate
在初始渲染时（即组件装载时）不会（也永远不会）调用。您确定
res.data.response.station
存在吗？您是否可以更新问题并共享响应对象（您可以从浏览器的开发工具中的“网络”选项卡获取此信息，或者尝试then块中的
console.log（res）
）？幸运的是，我刚刚发现了问题所在。我应该把
prevProps
放在
prevState
之前。现在我有另一个问题，但我发现如何解决这个问题。但是，谢谢你的快速评论。啊，对了，接得好，我也错过了。