Javascript 将对象数组筛选为新数组

在这方面，我有：

    state = {
     Producers: [], 
     France: [],
     Spain: [],
     Germany: [],
     Portugal: [],
     Greece: [],
     Austria: [],
     isLoading: false
     };

生产者阵列：

     {
    "_id" : ObjectId("5cc0bf1815cc7a2225edab0b"),
    "Code" : "FPG-BCH14",
    "URL" : "/jSQcl",
    "Just_In" : "",
    "Country" : "France",
    "Region" : "Burgundy"
},
{
    "_id" : ObjectId("5cc0bf1815cc7a2225edab0c"),
    "Code" : "FPG-CHA17",
    "URL" : "/XPxx",
    "Just_In" : "",
    "Country" : "France",
    "Region" : "Burgundy"  
},
{
    "_id" : ObjectId("5cc0bf1815cc7a2225edab0d"),
    "Code" : "FPG-BPN16",
    "Just_In" : "",
    "Country" : "France",
    "Region" : "Burgundy"

},

{
    "_id" : ObjectId("5cc0bf1815cc7a2225edab0e"),
    "Code" : "PAP-VIN17",
    "Country" : "Portugal",
    "Region" : "Vinho Verde",
    "Subregion" : "Lima"

}

现在我把所有对象都放在state.Producers中，我想把任何值为state.Producers.Country==France的对象放在所有国家，以此类推

这就是我设置状态的方式：

    loadProducers = () => {

     API.getProducers()
     .then(res => 
     this.setState({Producers: res.data})
     )
     .catch(err => console.log(err));
       }

所以我想在为生产者设置状态之后需要另一个.then语句，然后为每个国家/地区设置.filter语句，但我似乎无法让它工作。

假设res.data的结构为[{country:string}，{country:string}…]，则可以创建一个updatedState对象并将项推入其中

大概是这样的：

const loadProducers = () => {
    API.getProducers()
    .then(res => {
        const updatedState = {
            Producers: [], 
            France: [],
            Spain: [],
            Germany: [],
            Portugal: [],
            Greece: [],
            Austria: []
        };
        res.data.forEach((item) => {
            updatedState[item.Country].push(item);
        })
        // This line if you also need everything inside Producers
        updatedState.Producers = res.data;

        this.setState(updatedState);
    })
    .catch(err => console.log(err));
}

假设res.data的结构为[{Country:string}，{Country:string}…]，则可以创建一个updatedState对象并将项推入其中

大概是这样的：

const loadProducers = () => {
    API.getProducers()
    .then(res => {
        const updatedState = {
            Producers: [], 
            France: [],
            Spain: [],
            Germany: [],
            Portugal: [],
            Greece: [],
            Austria: []
        };
        res.data.forEach((item) => {
            updatedState[item.Country].push(item);
        })
        // This line if you also need everything inside Producers
        updatedState.Producers = res.data;

        this.setState(updatedState);
    })
    .catch(err => console.log(err));
}

---

你可以这样做

loadProducers = () => {
 API.getProducers()
  .then(({ data }) =>
    // Here we reduce all the results with respect to the country associated with
    updatedState = data.reduce((res, obj) => {
     if (!res[obj.Country]) {
       res[obj.Country] = [];
     }
     return { ...res, [obj.Country]: [...res[obj.Country], obj] }
    }, {});

    // Push all the data into Producers provided that you need it here. else you can ignore this line :)
    updatedState.Producers = data;

    //Finally update the state 
    this.setState(updatedState);
  ).catch(({ response }) => console.log(response));
}

---

希望这有帮助。

你可以这样做

loadProducers = () => {
 API.getProducers()
  .then(({ data }) =>
    // Here we reduce all the results with respect to the country associated with
    updatedState = data.reduce((res, obj) => {
     if (!res[obj.Country]) {
       res[obj.Country] = [];
     }
     return { ...res, [obj.Country]: [...res[obj.Country], obj] }
    }, {});

    // Push all the data into Producers provided that you need it here. else you can ignore this line :)
    updatedState.Producers = data;

    //Finally update the state 
    this.setState(updatedState);
  ).catch(({ response }) => console.log(response));
}

希望这有帮助。

React.ComponentsetState不会返回任何内容，因此Promisethen将有一个未定义的消息传递给它的回调。要避免这种情况，请改为传递，以便在状态更新之后运行。您希望使用生命周期的原因有很多，其中包括：您可以轻松更改数据源的来源，而无需更改状态本身的派生方式，生命周期几乎不需要维护，当组件更新时，它将始终运行，这意味着您不会因为异步条件而出现计时问题

this.componentDidUpdate=函数componentDidUpdate 以前的道具， 先前状态 { //将其包装在比较中，这样就不会无限循环 如果//在此处将制作人与以前的制作人进行比较{ //他们已经改变，更新状态，使用更新程序来防止时间问题 this.setStatestate=>{ //保持更改数据的同步 //这还允许您获取随时间变化的数据 const update={…state}； state.producers.forEachproducer=>{ //安全初始化 更新[producer.Country]=更新[producer.Country]| |[]； 如果！更新[producer.country].findproducer{ //推 更新[producer.Country].pushproducer； } }; 返回更新； } } } 这保证在类中以安全的方式在状态更新上运行，并使您的concernsfetch和派生结构保持独立且易于维护。

React.ComponentsetState不会返回任何内容，因此Promisethen将有一个未定义的传递给它的回调。要避免这种情况，请改为传递，以便在状态更新之后运行。您希望使用生命周期的原因有很多，其中包括：您可以轻松更改数据源的来源，而无需更改状态本身的派生方式，生命周期几乎不需要维护，当组件更新时，它将始终运行，这意味着您不会因为异步条件而出现计时问题

this.componentDidUpdate=函数componentDidUpdate 以前的道具， 先前状态 { //将其包装在比较中，这样就不会无限循环 如果//在此处将制作人与以前的制作人进行比较{ //他们已经改变，更新状态，使用更新程序来防止时间问题 this.setStatestate=>{ //保持更改数据的同步 //这还允许您获取随时间变化的数据 const update={…state}； state.producers.forEachproducer=>{ //安全初始化 更新[producer.Country]=更新[producer.Country]| |[]； 如果！更新[producer.country].findproducer{ //推 更新[producer.Country].pushproducer； } }; 返回更新； } } }

---

这可以保证在类中以安全的方式在状态更新上运行，并使您的concernsfetch和DerivativesDerivated结构保持独立且易于维护。

您可以发布一个如何设置数据结构的示例吗？res.data对象请澄清您的问题，例如您希望最终实现什么以及您希望如何进行比较？通常最好不要像这样重复状态。如果制作人已经拥有了你的所有数据，只需在呈现之前对其进行过滤：const france=state.Producers.filterp=>p.Country==francythanks@RobertMennell@BrunoMonteiro，我正在进一步了解这一点。。。我已经编辑了上面的问题，以包含state.Producers数组中的示例。非常感谢所有的投入！你能举个例子说明你的数据结构是如何设置的吗？res.data对象请澄清您的问题，例如您希望最终实现什么以及您希望如何进行比较？通常最好不要像这样重复状态。如果制作人已经拥有了你的所有数据，只需在呈现之前对其进行过滤：const france=state.Producers.filterp=>p.Country==francythanks@RobertMennell@BrunoMonteiro，我正在进一步了解这一点。。。我已经编辑了上面的问题以包含一个示例

---

---

状态中的内容。生产者数组。非常感谢所有的投入！这将容易出现计时问题，因此可能不可靠。这意味着维护获取也意味着维护派生状态感谢您的评论，但是，维护fetch意味着维护派生状态？如果他们从使用fetch改为使用不使用的库，会发生什么情况？然后，或者他们决定将其包装到另一个库中，以获得更易于维护的自以为是的响应检查器任何东西400转到另一个回调，200转到成功？他们需要维护更多的逻辑，而不仅仅是确保一个对象上的同一个键是一个对象数组，该数组中有一个国家/地区键将被置于状态，他们将始终需要调整函数嗯……但这听起来与答案没有问题。问题更多地涉及javascript以及如何解析对多个数组的响应。如果方法更改为不使用承诺，那么无论如何都需要重构。我明白你的意思，但是不要同意否决票…如果我否决你的回答，说如果他们想将密钥从国家/地区更改为其他国家/地区，你不处理也是一样的…这将容易出现时间问题，因此可能不可靠。这意味着维护获取也意味着维护派生状态谢谢你的评论，但是，维护fetch意味着维护派生状态？如果他们从使用fetch改为使用不使用的库，会发生什么情况？然后，或者他们决定将其包装到另一个库中，以获得更易于维护的自以为是的响应检查器任何东西400转到另一个回调，200转到成功？他们需要维护更多的逻辑，而不仅仅是确保一个对象上的同一个键是一个对象数组，该数组中有一个国家/地区键将被置于状态，他们将始终需要调整函数嗯……但这听起来与答案没有问题。问题更多地涉及javascript以及如何解析对多个数组的响应。如果方法更改为不使用承诺，那么无论如何都需要重构。我明白你的意思，但不同意否决票…如果我否决你的回答，说如果他们想把钥匙从国家换到其他地方，你不处理，也是一样的…这将容易出现时间问题，可能不可靠。你说的时间问题是什么意思？也许你应该给出更多的细节，而不仅仅是期望我们在你评分下降时搜索谷歌。如果我提出两个请求，它们几乎同时到达，但旧数据第二次到达，会发生什么，由于状态更新的异步性质，正在清除新数据？我想问题在于如何做，而不是在哪里做。@RobertMennell，如果您有多个api，并且每个api返回不同的数据结构，您是否将您的状态限制为标准结构，而不考虑在进行多个API调用时将要出现的数据类型？在这种情况下，即使您的方法也不可维护，并且可能需要使用状态管理库，如redux。这将容易出现计时问题，并且可能不可靠。您所说的计时问题是什么意思？也许你应该给出更多的细节，而不仅仅是期望我们在你评分下降时搜索谷歌。如果我提出两个请求，它们几乎同时到达，但旧数据第二次到达，会发生什么，由于状态更新的异步性质，正在清除新数据？我想问题在于如何做，而不是在哪里做。@RobertMennell，如果您有多个api，并且每个api返回不同的数据结构，您是否将您的状态限制为标准结构，而不考虑在进行多个API调用时将要出现的数据类型？在这种情况下，即使您的方法也不可维护，可能需要使用状态管理库，如redux。componentDidUpdate是一种生命周期方法，您不需要绑定它。很好的捕获，删除该componentDidUpdate是一种生命周期方法，您不需要绑定它。很好的捕获，删除它