Javascript React应用程序-在材质UI表中加载选定数组，不进行渲染检查

所以我已经努力工作了好几天，并在寻找如何做到这一点。我的React应用程序中有一个Material UI表。我想加载一个表，如果我的用户在所选数组中有条目，它将在DOM中预呈现检查。所选数组填充了我想要的条目，但我的表使用onClick，我认为需要一个事件来触发DOM来呈现检查。这是我桌子主体的相关部分

<TableBody>
                            {this.props.competitorData.map(competitor => {
                                const isSelected = this.props.isSelected(competitor.key);
                                return (
                                    <TableRow
                                        hover
                                        onClick={() => this.props.handleClick(competitor)}
                                        role="checkbox"
                                        aria-checked={isSelected}
                                        tabIndex={-1}
                                        key={competitor.key}
                                        selected={isSelected}
                                    >
                                        <TableCell padding="checkbox">
                                            <Checkbox checked={isSelected} />
                                        </TableCell>

本质上，我需要一种方法来呈现isSelected，它基于另一个具有相同键的较小列表（团队是competitorData的子集）。我尝试了很多东西，这里有很多要列出的。我正在寻求帮助，看看该怎么做才能让这一切顺利进行，因为一切都没有起作用，我也不确定我现在应该朝着什么方向前进。我尝试了很多似乎会导致渲染不稳定的东西。本质上，我试图使isSelected更基于状态，但使用内联函数设置和重置该状态，如

 {() => this.myFunctionThatUpdatesIsSelectedState(Key)}

这些在渲染中爆炸。有时会导致一个丑陋的无限循环

更新

基于下面的@Eld0w帖子，这确实呈现了我的检查子集

     checkKeys(val) {
        return this.props.team.some(teammate => {
            return val.key === teammate.competitorKey;
        });
}

getCompetitors = () => {
    const { competitorData, team } = this.props;
    return competitorData.map(
        value => ({
            value,
            isSelected: this.checkKeys(value)
        })
    )
}

桌子现在看起来像这样

                            <TableBody>
                            {this.getCompetitors().map(competitor => {
                                console.log('MYCOMPETITOR2::', competitor);
                                return (
                                    <TableRow
                                        hover
                                        onClick={event => this.props.handleClick(event, competitor.value)}
                                        role="checkbox"
                                        aria-checked={competitor.isSelected}
                                        tabIndex={-1}
                                        key={competitor.value.key}
                                        selected={competitor.isSelected}
                                    >
                                        <TableCell padding="checkbox">
                                            <Checkbox checked={competitor.isSelected} />
                                        </TableCell>

基本上，我需要呈现现有的检查，但也需要在过程中的某个地方维护标准isSelected函数。如果我想到了什么或者发布了什么，我也会在这里更新。显然欢迎进一步的投入

我想我需要将我的团队加载到我选择的数组中，然后运行我的标准isSelected函数。但这正是我遇到麻烦的地方，因为这是以国家为基础的。我疯了

最终更新

所以昨晚很晚了。我只是需要改变标准，让整个事情都能顺利进行。我将我的团队数组加载到本地状态选择的数组中。然后对我的竞争对手进行了财产检查。现在，它加载我的预选，然后用户可以从该点编辑表中的选择

最终解决方案

将预选团队加载到本地选定状态数组中

    componentWillMount() {
    this.renderChecks(this.props.team);
}

我有分层的桌子。这只是一些业务逻辑（这里不重要）。competitorworkey是我存储的键，它与较大的表（competitorData）的键相同。我需要它来让你工作

renderChecks(team) {
    const { selected } = this.state;
    let newSelected = [];
    team.map(teammate => {
        if (teammate.tier === '1') {
            newSelected = newSelected.concat(selected, teammate.competitorKey)
            this.setState({ selected: newSelected });
        }
    })
}

getCompetitor现在可以使用includes验证数组中是否存在值键

getCompetitors = () => {
    const { competitorData, team } = this.props;
    console.log('THISSTATESELECTED:::', this.state.selected)
    return competitorData.map(
        value => ({
            value,
            isSelected: this.state.selected.includes(value.key)
        })
    )
}

最后一张桌子看起来像

                            <TableBody>
                            {this.getCompetitors().map(competitor => {
                                return (
                                    <TableRow
                                        hover
                                        onClick={event => this.handleClick(event, competitor.value)}
                                        role="checkbox"
                                        aria-checked={competitor.isSelected}
                                        tabIndex={-1}
                                        key={competitor.value.key}
                                        selected={competitor.isSelected}
                                    >
                                        <TableCell padding="checkbox">
                                            <Checkbox checked={competitor.isSelected} />
                                        </TableCell>

{this.getCompetitors（）.map（competitor=>{
返回(
this.handleClick（event，competitor.value）}
role=“复选框”
选中的aria={competitor.isSelected}
tabIndex={-1}
key={competitor.value.key}
已选定={competitor.isSelected}
>

---

我知道这是一个大量的写作，但我花了很多时间试图让所有这些工作正常进行。我希望它能帮助有志于此的人。我会考虑让这更具redux价值，并可能会重新选择路线进行优化，但现在我将享受一天的工作表。再次感谢@Eld0w！！

所以基本上，你想根据另一个阵列的值，将一个

isSelected

道具添加到竞争对手阵列中。避免使用状态，这只是道具组合

简单的解决方案

与其直接映射竞争对手的数组，不如映射返回数组的函数

getCompetitors = () => {
  const { competitors, team } = this.props;
  return competitors.map(
    competitor => ({
      ...competitor,
      isSelected: // criterion
    })
  )
}

基本上，这样做的目的是分解对象并添加一个新属性

isSelected

，这要归功于扩展操作符

…

（ES6）

在渲染中，然后调用

this.getCompetitors（）.map（competitor=>…）

而不是

this.props.competitors

优化此解决方案

您需要使用插件，例如，以避免任何无用的渲染操作

const competitorSelector = createSelector(
  props => props.competitors,
  props => props.team,
  (competitors, team) => competitors.map(
    competitor => ({
      ...competitor,
      isSelected: // criterion 
    })
  )
)

然后在渲染中像这样使用它：

this.competitorSelector(this.props) 

---

您还需要使用

competitor.isSelected

而不是

isSelected

，因为该属性现在是您的竞争对手属性的一部分。

您可以制作一个测试用例来说明问题吗？如果有帮助，请从这里开始：太好了。让我消化一下，我会回复您的回答。谢谢！！团队是我的另一个数组，w这是我在这个解决方案中使用的吗？我一直认为这可能是一个重新选择的情况，我有一些选择器连接在其他组件中，但我对选择器非常陌生。我仍然在思考这个问题。不管怎样，想理解这里的直截了当，然后我将转向您的优化。那么，我的第二个ar在哪里ray加入了这个解决方案。在isSelected中，我会在那里指定我的团队数组键？？顺便说一句，当我尝试将不可变列表传递给func getCompetitors时，func getCompetitors出现类型错误，表示它不是一个函数，如：{this.getCompetitors（this.props.competitorData）（competitor=>{我尝试：{this.getCompetitors.map（this.props.competitorData）（competitor=>{Immutable带有映射，因此我不确定该类型为什么会出现问题。它是在之前直接进行映射时出现的，不确定该类型为什么现在出现问题。）

const competitorSelector = createSelector(
  props => props.competitors,
  props => props.team,
  (competitors, team) => competitors.map(
    competitor => ({
      ...competitor,
      isSelected: // criterion 
    })
  )
)

this.competitorSelector(this.props)