在 ReactJS 的地图功能中制作按钮展开和折叠答案

【问题标题】：Make a button expand and collapse in map function in ReactJS在 ReactJS 的地图功能中制作按钮展开和折叠
【发布时间】：2022-01-06 10:02:23
【问题描述】：

我正在做一个项目，作为练习反应的一种方式，我需要为每个地图数据呈现一个按钮。我成功地做到了这一点，但扩展和崩溃一直给我带来问题。每当我点击按钮时，所有数据都会一起折叠和展开。

const DataFetch = () => {
 ...
  const [btnValue, setBtnValue] = useState('+');

  const handleChange = (e) => {
    setShowData(!showData);
    setBtnValue(btnValue === '+' ? '-' : '+');
  };

  return (
    <div className='container'>
      ...
      {studentResults
        .filter((val) => {
          if (searchTerm === '') {
            return val;
          } else if (
            val.firstName.toLowerCase().includes(searchTerm.toLowerCase()) ||
            val.lastName.toLowerCase().includes(searchTerm.toLowerCase())
          ) {
            return val;
          } else {
            return null;
          }
        })
        .map((student) => {
          return (
            <div key={student.id}>
              <div className='card'>
                <div className='row'>
                  <div className='col-2'>
                    <div className='pic'>
                      <img src={student.pic} alt='avatar' />
                    </div>
                  </div>
                  <div className='col'>
                    <div className='details'>
                      <p className='name'>
                        {student.firstName.toUpperCase()}{' '}
                        {student.lastName.toUpperCase()}
                      </p>
                      <div className='sub-details'>
                        <p>Email: {student.email}</p>
                        <p>Company: {student.company}</p>
                        <p>Skill: {student.skill}</p>
                        <p>
                          Average:{' '}
                          {student.grades.reduce(
                            (a, b) => parseInt(a) + parseInt(b),
                            0
                          ) /
                            student.grades.length +
                            '%'}
                        </p>
                        <button onClick={handleChange} className='showBtn'>
                          {btnValue}
                        </button>
                        {showData  && (
                          <div>
                            <br />
                            {student.grades.map((grade, key) => {
                              return (
                                <p key={key}>
                                  Test {key + 1}: &emsp; {grade}%
                                </p>
                              );
                            })}
                          </div>
                        )}
...

折叠图片

展开图片

【问题讨论】：

标签： javascript reactjs dictionary render collapse

【解决方案1】：

所有元素一起展开和折叠，因为您为所有元素分配了相同的状态showData 状态。

当您想要展开或折叠单个学生时，一种解决方案是向您的数据（在student 中）添加一个新字段，即true 或false。

另一种解决方案是将showData 状态创建为一个数组，其中每个元素对应一个不同的student。当您单击按钮时，在这种情况下，您将传递给函数，例如 id，然后您将 student 链接到 showData 内的正确元素。

【讨论】：