在 const 而不是状态的列表列表中反应设置状态答案

【问题标题】：React setting state inside List of list on a const instead of a state在 const 而不是状态的列表列表中反应设置状态
【发布时间】：2019-01-31 17:38:29
【问题描述】：

基本的 React Web 应用程序

应用：

使用 onMouseEnter 和 onMouseLeave 将鼠标悬停在按钮上渲染联系人。

问题：

无法改变悬停状态

插件：

如何在 Team const 中将 Hover 的状态从 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>
              ))}

【问题讨论】：

您似乎没有使用组件状态，因此 setState 方法在您的代码中无法有效工作。

标签： reactjs

【解决方案1】：

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

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

我认为我整理的 sn-p 应该更好地向您展示如何正确地使用 React 进行尝试：

https://codesandbox.io/s/7wlx56j3r1

【讨论】：

那对我没有任何帮助。应该有悬停效果吗？
@GaryCarlyleCook -- 悬停时查看控制台。您可以有条件地添加一个类，它会给出某种视觉指示，但在这种情况下我没有这样做。