Question

我正在自学反应。我创建了一个小项目来熟悉React。我基本上希望滑块调整下面的网格大小。但是，更换滑块时，它会完全不正确地重新渲染。它应该做的是创建一个正方形网格，其尺寸等于滑块值。网格应始终为正方形，并且随着滑块值的变化，正方形的高度和宽度也应变化。

右侧列应具有1列，但与左侧正方形的行数一样。现在，它不会随着滑块的增长或缩小。滑块值的任何更改只会创建2个正方形，与滑块值无关。

之前：

Before image

之后：

After image

这是代码的样子（运行NPX-create-react-app后只需粘贴到App.js中）。如果有人可以解释我如何使它按预期工作，将不胜感激：

import React, { useState } from "react";
import "./App.css";

class Matrix {
  constructor(rows, cols) {
    this.rows = rows;
    this.cols = cols;
    this.size = rows * cols;
    this.values = new Array(this.size).fill("");
  }
}

function Cell(props) {
  return (
    <input
      className="matrix-component"
      id={props.id}
      value={props.value}
      onChange={(e) => props.onChange(props.id, e.target.value)}
    ></input>
  );
}

function App() {
  let [dim, setDim] = useState(3);
  let [matrix, setMatrix] = useState(new Matrix(dim, dim));
  let [rhs, setRHS] = useState(new Matrix(dim, 1));

  function updateMatrix(i, value) {
    let new_values = matrix.values.slice();
    let new_matrix = new Matrix(matrix.rows, matrix.cols);
    new_values[i] = value;
    new_matrix.values = new_values;
    setMatrix(new_matrix);
  }

  function updateRHS(i, value) {
    let index = i.replace(/\D/g, "");
    let new_values = rhs.values.slice();
    let new_matrix = new Matrix(matrix.rows, 1);
    new_values[index] = value;
    new_matrix.values = new_values;
    setRHS(new_matrix);
  }

  function updateSlider(value) {
    setDim(value);
  }

  function handleClick() {
    console.log(matrix.values);
    console.log(rhs.values);
  }

  return (
    <div className="App">
      <div className="content">
        <div className="matrix">
          <div>
            {Array.apply(null, Array(dim)).map(function (x, i) {
              const col = Array.apply(null, Array(dim)).map(function (y, j) {
                return (
                  <Cell
                    key={i * dim + j}
                    id={i * dim + j}
                    value={matrix.values[i * dim + j]}
                    onChange={updateMatrix}
                  />
                );
              });
              return <div key={i}>{col}</div>;
            })}
          </div>
          <div>
            <div className="rhs">
              {Array.apply(null, Array(dim)).map(function (x, i) {
                return (
                  <Cell
                    key={"rhs" + i}
                    id={"rhs" + i}
                    value={rhs.values[i]}
                    onChange={updateRHS}
                  />
                );
              })}
            </div>
          </div>
        </div>

        <button onClick={handleClick}>Solve</button>
      </div>

      <input
        type="range"
        min="3"
        max="10"
        value={dim}
        onChange={(event) => updateSlider(event.target.value)}
      ></input>
    </div>
  );
}
export default App;

.App {
  text-align: center;
  width: 500px;
  margin: auto;
  /* background: grey; */
}

.matrix {
  /* float: left; */
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: repeat(1, 1fr);
  grid-column-gap: 0px;
  grid-row-gap: 0px;
  padding: 10px;
  margin: 10px;
}

.matrix-component {
  border-width: thin;
  border-style: solid;
  border-color: black;
  width: 50px;
  height: 50px;
}

.rhs {
  margin-left: 40px;
  display: grid;
}

Answer 1

  function updateSlider(value) {
    setDim(value);
  }

event.target.value是一个字符串，因此您将dim从整数切换为字符串。如果将value转换为整数，它将可以正常工作。

  function updateSlider(value) {
    setDim(parseInt(value, 10));
  }

组件无法使用setState Hook正确重新渲染

1 个答案: