Reactjs 在常量（而不是状态）上的列表列表中设置状态

基本Web应用程序

应用程序：

使用onMouseEnter和onMouseLeave渲染带有悬停按钮的联系人

问题:

无法更改悬停的状态

插件：

如何在Team const中将悬停状态从true更改为false？ 我是新来的

我知道改变状态的简单方法，但这对我来说有点复杂

const Team = [
  {
    Position: "Symposium General Chair",
    Group: [
      {
        Name: ["DUmmy nam"],
        Contact: ["222222222222"],
        Hover: false
      }
    ]
  },
  {
    Position: "Symposium Chairs",
    Group: [
      {
        Name: ["DUmmy namexx"],
        Contact: ["33333333333"],
        Hover: false
      },
      {
        Name: ["DUmmy namexxcxzczx"],
        Contact: ["2222222222"],
        Hover: false
      },
      {
        Name: ["DUmmy namexca"],
        Contact: ["11111111111"],
        Hover: false
      }
    ]
  }
];

//Not important but to split the array into 2
function chunkArray(myArray, chunk_size) {
  var index = 0;
  var arrayLength = myArray.length;
  var tempArray = [];

  for (index = 0; index < arrayLength; index += chunk_size) {
    let myChunk = myArray.slice(index, index + chunk_size);
    tempArray.push(myChunk);
  }

  return tempArray;
}

//Extracted focus code here
    {chunkArray(Team, 2).map((col, i) => (
                <div className="row" key={i}>
                  {col.map(_Team => (
                    <div key={_Team.Position} className="w-50 ">
                      <h5>
                        <span className="badge badge-pill badge-info col-sm ">
                          {_Team.Position}
                        </span>
                      </h5>
                      {_Team.Group.map(_Group => (
                        <h6 key={_Group.Name} className="col-sm ">
                          {_Group.Name}

                          {!_Group.Hover ? (
                            <button
                              type="button"
                              className="btn close"

          //Problem is here how do I change the hover state to true?
                              onMouseEnter={_Group.Hover.setState(
                                (Hover = true)
                              )}

         //Problem is here how do I change the hover to false?
                              onMouseLeave={_Group.Hover.setState(
                                (Hover = false)
                              )}
                            >
                              O
                            </button>
                          ) : (
                            <div style={letterStyle} className="close">
                              {_Group.Contact}
                            </div>
                          )}
                        </h6>
                      ))}
                    </div>
                  ))}
                </div>
              ))}

const团队=[
{
职位：“研讨会总主席”，
组：[
{
名称：[“虚拟nam”]，
联系人：[“22222”]，
悬停：错误
}
]
},
{
职位：“研讨会主席”，
组：[
{
名称：[“虚拟名称xx”]，
联系人：[“33333”]，
悬停：错误
},
{
名称：[“虚拟名称xxcxzczx”]，
联系人：[“22222”]，
悬停：错误
},
{
名称：[“虚拟名称XCA”]，
联系人：[“11111111”]，
悬停：错误
}
]
}
];
//不重要，但要将阵列拆分为2
函数chunkArray（myArray，chunk\u大小）{
var指数=0；
var arrayllength=myArray.length；
var tempArray=[]；
对于（索引=0；索引(
{col.map（_Team=>(
{{团队位置}
{{u Team.Group.map（{u Group=>(
{{u Group.Name}
{！\u组。悬停(
O
) : (
{{u Group.Contact}
)}
))}
))}
))}

我认为您有点忽略了使用React的意义。JSON结构非常混乱，我不确定您想做什么，但请看下面的CodeSandbox，因为我认为您应该像这样使用更新程序：

  handleOnMouseEnter(teamIndex, groupIndex) {
    console.log("entering teamIndex/groupIndex: ", teamIndex, groupIndex);
    this.setState(state => {
      state.teams[teamIndex].Group[groupIndex].Hover = true;
      return state;
    });
  }

我认为我编写的代码片段应该能更好地向您展示如何正确地使用React：

---

看起来您没有使用组件状态，因此setState方法在代码中无法有效工作。这对我没有任何帮助。应该有悬停效果吗？@GaryCarlyleCook——在悬停时查看控制台。您可以有条件地添加一个类，这将提供某种视觉指示，但在本例中，我没有这样做。