Javascript 为什么我的组件在将数据发布到REST服务后不更新

因此，我正在尝试构建我的第一个react.js应用程序，我想知道，为什么我的页面在通过axios向我的应用程序发布新播放器后，或者在删除一个播放器后，既不更新。之后我刷新页面时，根据操作创建或删除播放器。所以API部分工作得很好

我有一个PlayerPage.js，如下所示：

PlayerPage.js

import React，{Component}来自'React'；
从“axios”导入axios；
从“/playermer”导入playermer；
从“/playercard”导入游戏卡；
类PlayerPage扩展组件{
建造师（道具）{
超级（道具）；
}
状态={
玩家：[]
};
componentDidMount（）{
axios
.get（'http://localhost:3001/player')
。然后（res=>{
const players=res.data；
this.setState（{players}）；
})
.catch（console.log）；
}
render（）{
返回(
添加玩家

可用玩家
{this.state.players.map（player=>(
))}
);
}
}
导出默认播放页面；

它引用（并从API中填充）PlayPerform和PlayerCard组件，如下所示：

playexper.js

import React，{Component}来自'React'；
从“axios”导入axios；
进口{
FormControl，
FormGroup，
FormLabel，
形式，
按钮
}来自“反应引导”；
类PlayPerform扩展组件{
状态={
名称：“”，
昵称：“”
};
handleSubmit=e=>{
e、 预防默认值（）；
axios
.post（'http://localhost:3001/player，JSON.stringify（this.state）{
标题：{
接受：'application/json'，
“内容类型”：“应用程序/json”
}
})
.然后（）
.catch（err=>console.log（err））；
};
handelChange=e=>{
这是我的国家({
[e.target.name]：e.target.value
});
};
render（）{
返回(
名称
昵称
添加
);
}
}
导出默认PlayPerform；

和playercard.js：

import React，{Component}来自'React'；
从“react bootstrap”导入{Card，Button}；
从“道具类型”导入道具类型；
从“axios”导入axios；
类PlayerCard扩展组件{
建造师（道具）{
超级（道具）；
this.player=props.player；
this.handleClick=this.handleClick.bind（this）；
}
handleClick（）{
axios
.删除(`http://localhost:3001/player/${this.player.id}`）
.然后（）
.catch（console.log）；
}
render（）{
返回(
{this.player.name}
{this.player.昵称}
删除
);
}
}
PlayerCard.propTypes={
玩家：PropTypes.object.isRequired
};
导出默认播放卡；

所以问题是，为什么我方没有适当更新？ 我很感激你给我的任何提示。提前谢谢

---

额外问题：如何根据节点服务器的运行位置动态获取ip和端口？

生命周期方法

componentDidMount（）

不会在

PlayerPage.js

中每次状态更改时运行，只在首次加载到页面时运行一次。这意味着页面加载时GET请求只运行一次

---

您需要在POST或DELETE发生后再次调用GET路径，或者在POST/DELETE调用将数据放入页面和数据库时，使用POST/DELETE调用中的数据更新应用程序的状态。

为什么它不工作：

因为您在提交表单时没有刷新列表视图。 React并不是魔术，您需要知道何时需要重新渲染视图

一种方法是将

onCreate

道具添加到

playexper.js

中，并在表单成功提交时运行该函数

import React, { Component } from 'react';
import axios from 'axios';
import PlayerForm from './playerform';
import PlayCard from './playercard';

class PlayerPage extends Component {
  constructor(props) {
    super(props);
  }

  state = {
    players: []
  };

  loadPlayers() {
    axios
      .get('http://localhost:3001/player')
      .then(res => {
        const players = res.data;
        this.setState({ players });
      })
      .catch(console.log);
  }

  componentDidMount() {
    this.loadPlayers();
  }

  render() {
    return (
      <div>
        <h2>Add Player</h2>
        <PlayerForm onCreate={() => this.loadPlayers()}/>
        <hr></hr>
        <h2>Available Player</h2>
        {this.state.players.map(player => (
          <PlayCard player={player} key={player.id} />
        ))}
      </div>
    );
  }
}

export default PlayerPage;

---

但这取决于您的开发环境。

要更新玩家卡列表，必须在PlayerPage中更新玩家状态

---

由于Rest API调用后，父级无法获得新的播放器，因此我们似乎需要一个回调函数来作为子级更新父级组件。

我假设您没有使用任何状态管理工具（Redux、Flux），并且只有react已就位，而且您不想再次调用API。 在PlayerPage组件中创建一个函数

addPlayer=(player)=>{
this.setState({
players: {...players, player}
})
}
}

在同一组件的渲染中

内部玩家卡

handleClick() {
    axios
      .delete(`http://localhost:3001/player/${this.player.id}`)
      .then((response)=>{
you get your output pass it to props
var player=response.data
this.props.addPlayer(response)
    })
      .catch(console.log);
  }

---

此示例仅参考addPlayer。您可以根据您的要求对其进行定制

正如所有建议，您没有更新

PlayerPage

组件的状态。即使是works建议的答案，我还是建议尽可能减少API调用。我的解决办法如下：

PlayerPage.js

import React，{Component}来自'React'；
从“axios”导入axios；
从“/playermer”导入playermer；
从“/playercard”导入游戏卡；
类PlayerPage扩展组件{
建造师（道具）{
超级（道具）；
}
状态={
玩家：[]
};
componentDidMount（）{
axios
.get（'http://localhost:3001/player')
。然后（res=>{
const players=res.data；
this.setState（{players}）；
})
.catch（console.log）；
}
handleAddNewPlayer=玩家=>{
this.setState（prevState=>({
玩家：[…prevState.player，player]//或[玩家，…prevState.player]
}))
}
HandlerRemovePlayer=id=>{
常量players=this.state.filter（player=>player.id！==id）
this.setState（{players}）
}
render（）{
返回(
添加玩家

可用玩家
{this.state.players.map（player=>(
))}
);
}
}
导出默认播放页面；

playexper.js

import-React{
process.env.API_HOST

addPlayer=(player)=>{
this.setState({
players: {...players, player}
})
}
}

handleClick() {
    axios
      .delete(`http://localhost:3001/player/${this.player.id}`)
      .then((response)=>{
you get your output pass it to props
var player=response.data
this.props.addPlayer(response)
    })
      .catch(console.log);
  }