this.setState与映射写入本身

我想在对象数组上使用this.setState，但是，我的代码只能设置1对象的状态。我认为它是在自己写作。this.setState与映射写入本身

路径：MongoDB

"careerHistoryPositions": [ 
    { 
     "company": "Company A", 
     "title": "Title A", 
     "uniqueId": "1497575516964" 
    }, 
    { 
     "company": "Company B", 
     "title": "Title B", 
     "uniqueId": "1497575525034" 
    } 
    ]

路径：Reactpage

constructor(props) { 
    super(props); 

    this.state = { 
     data: [], 
    }; 
    } 

componentWillReceiveProps(nextProps) { 
    const profileCandidateCollection = nextProps.profileCandidate; 
    const profileCandidateCollectionId = profileCandidateCollection._id; 
    const careerHistoryPositions = profileCandidateCollection && profileCandidateCollection.careerHistoryPositions; 

    if(careerHistoryPositions) { 
     careerHistoryPositions.map((position) => 
     this.setState({ 
     data: [{ 
      'position.uniqueId': position.uniqueId || '', 
      'position.company': position.company || '', 
      'position.title': position.title || '' 
     }] 
     }) 
    ); 
    } 
    }

来源

2017-06-16 bp123

您* *从数组对象改变data'的'值。这就是你告诉JavaScript要做的事情。你想要发生什么？也许你的意思是做'this.setState（{data：careerHistoryPositions.map（...）}）''而不是？ –

现在，您正在告诉JavaScript将'data'设置为一个对象的数组。这里没有魔术发生。 '数据'就是你正在设置的。 –

有一个未知数量的'careerHistoryPositions'需要被映射。它可能是1或它可能是20.我需要设置数据的状态，以便我可以使用表单。 – bp123

请注意，set状态不会立即调用，s其次，你用新状态覆盖数据。其次，多次设置状态会重新渲染，效率低下。

停止覆盖，您可以使用扩展运算符。例如：

a = [1,2,3] 
b = [...a, 4,5] 
//b = [1,2,3,4,5]

所以翻译给你的代码，它应该是这样的：

this.setState({ 
     data: [...this.state.data, { 
      'position.uniqueId': position.uniqueId || '', 
      'position.company': position.company || '', 
      'position.title': position.title || '' 
     }] 
     })

这仍然是低效的，因为你正在通话状态多次。我要改变它看起来像这样：

if(careerHistoryPositions) { 
     const newData = careerHistoryPositions.map((position) => 
     ({ 
      'position.uniqueId': position.uniqueId || '', 
      'position.company': position.company || '', 
      'position.title': position.title || '' 
     })); 
     this.setState({ 
      data: newData 
     }) 
}

来源

2017-06-16 02:05:02

尝试你最后的建议，我得到'意外的令牌，预计，'错误 – bp123

错过了对象的{}括号。尝试新版本。 –

这似乎是最好的答案，但他们都工作。谢谢大家的帮助。 – bp123

if(careerHistoryPositions) { 
    const data = [ ]; 
    careerHistoryPositions.map((position) => 
    data.push(
{ 
'position.uniqueId': position.uniqueId || '', 
'position.company': position.company || '', 
'position.title': position.title || '' 
}) 
); 

    this.setState({ data, }); 
    }

这应该工作。我觉得这个方法会更好，而不是地图功能中多次设置状态..

来源

2017-06-16 02:01:42 JiN

this.setState与映射写入本身

回答

相关问题