选择标签在 React JS 中重新呈现答案

【问题标题】：Select tag is rerendering in React JS选择标签在 React JS 中重新呈现
【发布时间】：2022-01-26 17:39:11
【问题描述】：

我想显示嵌套数组中的数据。显示的数据将通过下一个和上一个按钮以及选择菜单进行更改。但我想更新选择菜单中的默认选项以显示现在显示的数据的女巫部分（和页面）。因为在 ReactJS 中无法动态更改 select 标签的 defaultValue，所以我将 select 标签放在 div 标签内并给出 div key={changeableValue}。我给选择标签（defaultValue = {changeableValue}）相同的值并且它起作用了。每次渲染时都会更新 select 中的默认选项。但是在多次单击下一步按钮后，选择标签重新渲染（和重新渲染）。我怎样才能停止重新渲染？

export default function App() {
  const [part, setPart] = useState(0);
  const [partVal, setPartVal] = useState(0);
  const [page, setPage] = useState(0);
  const [pageVal, setPageVal] = useState(0);
  // data
  const pics = [
    [1, 2, 3],
    [4, 5, 6],
    [7, 8, 9],
  ];

  const next = () => {
    setPage(page + 1);
    setPageVal(page + 1);
    if (page == pics[part].length - 1 && part != pics.length - 1) {
      setPart(part + 1);
      setPage(0);
      setPartVal(part + 1);
    } else if (part == pics.length - 1 && page == pics[part].length - 1) {
      setPart(0);
      setPage(0);
      setPartVal(part + 1);
    }
  };

  const prev = () => {
    setPage(page - 1);
    setPageVal(page - 1);
    if (page == 0 && part != 0) {
      setPart(part - 1);
      setPage(0);
      setPartVal(part + 1);
    } else if (part == 0 && page == 0) {
      setPart(pics.length - 1);
      setPage(0);
      setPartVal(part + 1);
    }
  };

  const changePart = (e) => {
    setPart(parseInt(e.target.value) - 1);
    setPage(0);
    setPageVal(0);
  };
  return (
    <div>

      <label htmlFor="part">Choose part:</label>
      <div key={partVal}>
        <select id="part" onChange={changePart} defaultValue={partVal}>
          {pics.map((i, index) => (
            <option key={Math.floor(Math.random() * 999)} value={index}>
              part: {index + 1}
            </option>
          ))}
        </select>
      </div>

      <label htmlFor="page">Choose page:</label>
      <div key={pageVal}>
        <select
          id="page"
          onChange={(e) => setPage(parseInt(e.target.value))}
          defaultValue={pageVal}
        >
          {pics[part].map((i, index) => (
            <option key={Math.floor(Math.random() * 999)} value={index}>
              {index + 1}
            </option>
          ))}
        </select>
      </div>

      <div>{pics[part][page]}</div>

      <button onClick={prev}>prev</button>
      <button onClick={next}>next</button>
    </div>
  );
}

Code Sandbox

【问题讨论】：

标签： reactjs select jsx rerender

【解决方案1】：

简单的答案是您可以将 defaultValue 更改为 value 你可以搜索并了解 ReactJS 中受控输入和非受控输入的区别

受控

在受控组件中，表单数据由 React 组件处理。

不受控制

另一种选择是不受控制的组件，其中处理表单数据由 DOM 本身。编写一个不受控制的组件，而不是为每个状态更新编写事件处理程序，您可以使用 ref 从 DOM 中获取表单值。

简单地说：

当您在输入中使用 onChange 时，使用 [value]
当您使用 ref 或 id 更改 [读取或更改输入值] 时使用 [defaultValue]

【讨论】：