在 React to State 中解析 JSON 响应

Question

我有一个API，它向我发送了一个JSON，我想用它填充我的状态，但是一些变量名称不同。我必须单独做所有事情还是有办法一次做所有事情？

来自请求的我的 JSON：

{
   "name":"julps",
   "place": "house",
   "number":"555032",
   ...
   "products":[
      {
         "name":"name1",
         "id":"123456"
      },
      {
         "name":"name2",
         "id":"234567"
      }
   ],
}

我的状态：

this.state = {
  name: '',
  place: '',
  phone: '',
  ...
  things: []
};

以及获取请求：

  fetchEditData = (code) => {
    installationDocumentRequestApi(`/${code}`)
      .then((importedJson) => {
        if (importedJson != null) {
          this.setState({
            name: importedJson.name,
            place: importedJson.place,
            phone: importedJson.number,
            ...
            things: importedJson.products
          });
        }
      });
  };

在此示例中，可以单独执行它们，但在我的实际示例中，我有大约 20 个字段，所以我开始想知道是否有更短的方法来完成它，或者它是唯一可能的解决方案。 另外，如果我可以拥有所有相同的名称，那么它是否可以在不单独设置的情况下工作？

Answer 1

我必须单独做所有事情还是有办法一次做所有事情？

您不必单独做所有事情。是的，你有办法一次获得所有这些。

我建议您使用所有数据创建一个状态。然后，您将通过它访问您的数据。

例如：

this.state = {
  data: null
};

... 

fetchEditData = (code) => {
    installationDocumentRequestApi(`/${code}`)
      .then((importedJson) => {
        if (importedJson != null) {
          this.setState({
            data: importedJson
          });
        }
      });
  };

然后您可以获取您所在州的数据。以console.log(data.name)为例。

正如@evolutionxbox 在评论中提到的那样，您最好使用扩展语法this.setState({ ...importedJson })