弹出框中的按钮 'more' 不能与 React hook useState 一起正常工作

Question

我创建了一个显示星座的组件（类似于弹出框），其中有一张图片和描述。弹出框工作正常。我添加了一个“更多”按钮以查看更多描述，因此我为其使用了 useState，但它不起作用，当我单击它时不显示其余文本。

感谢您的帮助！

const Modal = ({

  children, visible, hide, fermer, more,

}) => {

  const popup = `popup ${visible ? 'block' : 'hidden'}`;

  return (

    <div className={popup}>

      {fermer ? null : (

        <button className="close" onClick={hide} type="button">X</button>

      )}

      {children}

      <button className="more" onClick={more} type="button">more</button>

    </div>

  );

};

export default Modal;
import './App.css';

import { useState } from 'react';

import Element from './Element';

import Modal from './Modal';

import Bd from './Bd';

function App() {

  const bd = Bd.map((element) => (

    <Element

      nom={element.nom}

      image={element.image}

      description={element.description}

      modulo={element.modulo}

    />

  ));

  const [year, setYear] = useState('');

  function handleChange(event) {

    setYear(event.target.value);

  }

  const [signe, setSigne] = useState([]);

  const [vis, setVis] = useState(false);

  const [desc, setDesc] = useState(true);

  function handleSubmit() {

    setVis(true);

    const yearModulo = Number(year) % 12;

    Bd.map((element) => (

      yearModulo === element.modulo ? setSigne(

        [<h1>{element.nom}</h1>,

          <div>{element.description.substr(0, 150)}</div>,

          desc ? <div />

            : <div>{element.description.substr(150, 600)}</div>,

          <img src={`/images/${element.image}`} alt="" />,

        ],

      ) : false

    ));

  }

  return (

    <div>

      <div>

        <input

          className="text-center font-bold"

          type="number"

          id="year"

          name="year"

          value={year}

          onChange={handleChange}

        />

        <button type="submit" onClick={handleSubmit}>Valider</button>

      </div>

      <div className="flex flex-wrap">{bd}</div>

      <Modal

        visible={vis}

        hide={() => setVis(false)}

        more={() => setDesc(false)}

      >

        <div>

          <div>{signe}</div>

        </div>

      </Modal>

    </div>

  );

}

export default App;

Answer 1

我会避免在本地状态中存储组件 (setSigne([<h1>{element.nom}</h1>,...)。优先在状态中存储无法从其他现有状态计算的值，并在渲染时生成元素。

const [signe, setSigne] = useState(null);

function handleSubmit() {
  setVis(true);
  const yearModulo = Number(year) % 12;
  setSigne(Bd.find(element => yearModulo === element.modulo));
}

// ...

<div>
  {signe && <div>
    <h1>{signe.nom}</h1>
    <div>{signe.description.substr(0, 150)}</div>
    {desc ? <div /> : <div>{signe.description.substr(150, 600)}</div>}
    <img src={`/images/${signe.image}`} alt="" />
  </div>}
</div>

此外，从数组生成元素时不要忘记添加 key 属性：

const bd = Bd.map(element => (
  <Element
    key={element.nom}
    // ...

弹出框中的按钮 'more' 不能与 React hook useState 一起正常工作

Button 'more' in a popup box doesn’t work right with React hook useState

reactjs

use-state