Javascript 表不包括'；t在创建、编辑或删除新行后更新

我正在使用ReactJs和Material UI来显示汽车部件的表格，但在创建、编辑或删除一行后从不更新。 其次是结构：

class MainCar extends React.Component {
  constructor(props) {
        super(props);
        this.state = {
          cars: []
        };
    this.apiUrl = "http://localhost:8080/api/v1/cars";
    this.onCreate = this.onCreate.bind(this);
    this.onUpdate = this.onUpdate.bind(this);
    this.onDelete = this.onDelete.bind(this);
    this.loadFromServer = this.loadFromServer.bind(this);
  }
  loadFromServer() {
    fetch(this.apiUrl)
        .then(response => response.json())
        .then(json => {
           this.setState({
             cars: json.cars
           });
        });
  }
  onCreate(newCar) {
    try {
      const result = 
      fetch(this.apiUrl, {
        method: 'POST',
        headers: {
          'Accept': 'application/json',
          'Content-Type': 'application/json',
        },
        body: JSON.stringify(newCar)
      });
    } catch(e) {
      console.error(e);
    }
    this.loadFromServer();
  }
  onUpdate(car, updatedCar) {
    try {
      const result = 
        fetch(car._links.self.href, {
          method: 'PUT',
          headers: {
            'Accept': 'application/json',
            'Content-Type': 'application/json',
          },
          body: JSON.stringify(updatedCar)
        });
    } catch(e) {
      console.error(e);
    }
    this.loadFromServer();
  }
  onDelete(car) {
    try {
      const result = 
        fetch(car._links.self.href, {
          method: 'DELETE',
          headers: {
            'Accept': 'application/json',
            'Content-Type': 'application/json',
          },
          body: JSON.stringify(car)
        });
    } catch(e) {
      console.error(e);
    }
    this.loadFromServer();
  }
  render() {
    return (
      <CarsTable cars={this.state.cars}
        onCreate={this.onCreate}
        onUpdate={this.onUpdate}
        onDelete={this.onDelete} />
    );
  }
}

class CarsTable extends React.Component {
  constructor(props) {
    super(props);
  }
  render() {
    const cars = this.props.cars.map(car =>
      <Car key={car._links.self.href}
        car={car}
        onUpdate={this.props.onUpdate}
        onDelete={this.props.onDelete} />
    );
    return (
      <Table>
        <TableBody>
          {cars}
        </TableBody>
      </Table>
    );
  }
}

class Car extends React.Component {
  constructor(props) {
    super(props);
  }
  render() {
    return (
      <TableRow>
          <TableCell>{car.code}</TableCell>
          <TableCell>{car.color}</TableCell>
      </TableRow>
    );
  }
}

class MainCar扩展了React.Component{
建造师（道具）{
超级（道具）；
此.state={
汽车：[]
};
this.apiUrl=”http://localhost:8080/api/v1/cars";
this.onCreate=this.onCreate.bind（this）；
this.onUpdate=this.onUpdate.bind（this）；
this.onDelete=this.onDelete.bind（this）；
this.loadFromServer=this.loadFromServer.bind（this）；
}
loadFromServer（）{
获取（this.apirl）
.then（response=>response.json（））
。然后（json=>{
这是我的国家({
汽车：json.cars
});
});
}
onCreate（新车）{
试一试{
常数结果=
获取（this.apirl{
方法：“POST”，
标题：{
“接受”：“应用程序/json”，
“内容类型”：“应用程序/json”，
},
正文：JSON.stringify（newCar）
});
}捕获（e）{
控制台错误（e）；
}
这是loadFromServer（）；
}
onUpdate（汽车，更新的汽车）{
试一试{
常数结果=
获取（car._links.self.href、{
方法：'放'，
标题：{
“接受”：“应用程序/json”，
“内容类型”：“应用程序/json”，
},
正文：JSON.stringify（updatedCar）
});
}捕获（e）{
控制台错误（e）；
}
这是loadFromServer（）；
}
onDelete（汽车）{
试一试{
常数结果=
获取（car._links.self.href、{
方法：“删除”，
标题：{
“接受”：“应用程序/json”，
“内容类型”：“应用程序/json”，
},
正文：JSON.stringify（car）
});
}捕获（e）{
控制台错误（e）；
}
这是loadFromServer（）；
}
render（）{
返回(
);
}
}
类carreact.Component{
建造师（道具）{
超级（道具）；
}
render（）{
const cars=this.props.cars.map（car=>
);
返回(
{cars}
);
}
}
类。组件{
建造师（道具）{
超级（道具）；
}
render（）{
返回(
{car.code}
{car.color}
);
}
}

正如您所看到的，MainCar在其状态上有cars数组，但CarTable和Car只有属性

当我登录渲染函数时，我看到数据已更改，但视图未更新

仅查看更新

• 当我按F5更新页面时
• 或者，当我创建、更新或删除新行时，我会看到以前的更改，但不会看到最后的更改

我读到React在状态改变时重新渲染组件。我应该为从道具复制的可移动和汽车组件设置状态吗？我怎样才能解决这个问题

---

提前感谢。

您的代码看起来应该可以运行（我知道当它显然不起作用时，这并不是最有用的消息），但下面是一些您可以尝试的事情。尝试对构造函数中的函数执行

bind（this）

，并尝试调用this.loadFromServer（），而不是loadFromServer（）。还有，我猜你刚刚把这个从你的帖子里漏掉了，但是你没有删除

请参见下文（查看构造函数和onCreate方法）：

class MainCar扩展了React.Component{
建造师（道具）{
超级（道具）；
this.loadFromServer=this.loadFromServer.bind（this）；
this.onCreate=this.onCreate.bind（this）；
this.onUpdate=this.onUpdate.bind（this）；
此.state={
汽车：[]
};
}
loadFromServer（）{
获取（this.apirl）
.then（response=>response.json（））
。然后（json=>{
这是我的国家({
汽车：json.cars
});
});
}
onCreate（）{
//要创建的更多代码。。。
此.loadFromServer（）；//用于更新cars状态
}
onUpdate（）{
//更多的代码放在。。。
此.loadFromServer（）；//用于更新cars状态
}
render（）{
返回(
);
}
}

您需要等待JavaScript中的异步操作。否则，您将并行执行

POST

和

GET

，而不是按顺序执行。您可以使用

async

函数来简化此操作

async onCreate(newCar) {
  try {
    await fetch(this.apiUrl, {
      method: 'POST',
      headers: {
        'Accept': 'application/json',
        'Content-Type': 'application/json',
      },
      body: JSON.stringify(newCar)
    });
  } catch(e) {
    console.error(e);
  }

  return this.loadFromServer();
}

---

可能发生的情况是，GET请求在POST/PUT/DELETE完成之前返回。解决此问题的一种方法是，将GET放入

然后
块，确保只有在另一个操作完成后才触发GET

e、 g

您确定
onCreate
、
onUpdate
和
onDelete
的额外详细信息不相关吗？也许您并没有等到这些操作完成后再重新加载服务器数据，所以您得到的是修改前的数据。@Jacob code UpdatedPologies。你所有的建议都是基于实际的代码。我浪费了好几天寻找这个解决方案。你能推荐一个网站来学习这些关于Javascript的概念吗。我正在从C++世界到JavaScript世界。最重要的是了解JavaScript（事件循环）的执行模型。有很多关于它的伟大文章；这里有一个：
async onCreate(newCar) {
  try {
    await fetch(this.apiUrl, {
      method: 'POST',
      headers: {
        'Accept': 'application/json',
        'Content-Type': 'application/json',
      },
      body: JSON.stringify(newCar)
    });
  } catch(e) {
    console.error(e);
  }

  return this.loadFromServer();
}

onDelete(car) {
    try {
      const result = 
        fetch(car._links.self.href, {
          method: 'DELETE',
          headers: {
            'Accept': 'application/json',
            'Content-Type': 'application/json',
          },
          body: JSON.stringify(car)
        }).then(a => this.loadFromServer());
    } catch(e) {
      console.error(e);
    }
  }