Reactjs 如何在useState中使用数组？

我正在构建一个用于计算矩阵的简单应用程序，因为矩阵需要9个值，因此我需要9个状态来存储值和计算目的

9个状态的使用非常长，我如何使用一个状态并在其中创建数组并像9个状态那样存储值

使用9个状态可启用onchange函数的9个处理程序

因为值不能为null，所以我们不能创建像这样的空白数组

const [values,setValues] = useState([])

简而言之，我如何缩短代码，如何使用循环来最小化代码，因为每个输入对我们都很重要

import React，{useState}来自“React”
函数Add（）{
常量[value1，setValue1]=useState（0）
常量[value2，setValue2]=useState（0）
常量[value3，setValue3]=使用状态（0）
常量[value4，setValue4]=使用状态（0）
常量[value5，setValue5]=使用状态（0）
常量[value6，setValue6]=useState（0）
常量[value7，setValue7]=useState（0）
常量[value8，setValue8]=useState（0）
常量[value9，setValue9]=useState（0）
常量[solution，setSolution]=useState（null）
常量changeHandler1=（e）=>{
设置值1（如目标值）
日志（“处理程序”，值1、值2、值3、值4、值5、值6、值7、值8、值9）
}
常量changeHandler2=（e）=>{
设置值2（如目标值）
日志（“处理程序”，值1、值2、值3、值4、值5、值6、值7、值8、值9）
}
常量changeHandler3=（e）=>{
设置值3（如目标值）
日志（“处理程序”，值1、值2、值3、值4、值5、值6、值7、值8、值9）
}
常量changeHandler4=（e）=>{
设置值4（如目标值）
日志（“处理程序”，值1、值2、值3、值4、值5、值6、值7、值8、值9）
}
常量changeHandler5=（e）=>{
设置值5（如目标值）
日志（“处理程序”，值1、值2、值3、值4、值5、值6、值7、值8、值9）
}
常量changeHandler6=（e）=>{
设置值6（如目标值）
日志（“处理程序”，值1、值2、值3、值4、值5、值6、值7、值8、值9）
}
常量changeHandler7=（e）=>{
设置值7（如目标值）
日志（“处理程序”，值1、值2、值3、值4、值5、值6、值7、值8、值9）
}
常量changeHandler8=（e）=>{
设置值8（如目标值）
日志（“处理程序”，值1、值2、值3、值4、值5、值6、值7、值8、值9）
}
常量changeHandler9=（e）=>{
设置值9（如目标值）
日志（“处理程序”，值1、值2、值3、值4、值5、值6、值7、值8、值9）
}
常量solveHandler=（）=>{
设sub1=value5*value9-value8*value6
设sub2=value4*value9-value7*value6
设sub3=value4*value8-value5*value7
让答案=（value1*sub1）-（value2*sub2）+（value3*sub3）
设置解决方案（答案）
}
返回(
{console.log（“return”，value1，value2，value3，value4，value5，value6，value7，value8，value9）}

















解决
回答：{解决方案}

)
}
导出默认添加

您可以使用

useReducer

hook。例如

  const initialValues = {};

  for (let i = 0; i < 9; i++) {
    initialValues[i] = 0;
  }

  const [values, setValues] = useReducer(
    (state, newState) => ({ ...state, ...newState }),
    initialValues
  );

  const changeHandler = (e) => {
    setValues({ [e.target.name]: e.target.value });
  };

  return (
    <>
      {Object.entries(values).map(([k, v]) => (
        <input name={k} type="text" onChange={changeHandler} value={v} />
      ))}
      <button onClick={solveHandler}>solve</button>
      <p>Answer: {solution}</p>
    </>
  );

const initialValues={}；
for（设i=0；i<9；i++）{
初始值[i]=0；
}
const[values，setValues]=useReducer(
（state，newState）=>（{…state，…newState}），
初始值
);
常量changeHandler=（e）=>{
setValues（{[e.target.name]：e.target.value}）；
};
返回(
{Object.entries（values.map）（[k，v]）=>(
))}
解决
回答：{解决方案}

);

---

在这种情况下，useReducer的工作方式与setState类似，只更新给定的值。

使用数组。矩阵通常用语言表示为数组

function Add() {
  const [matrix, setMatrix] = React.useState(Array.from({ length: 8 }).fill(0));
  const [solution, setSolution] = useState(null);

  return (
    <div>
      {matrix.map((num, idx) => {
        const onChange = e => {
          const newMatrix = [...matrix];
          newMatrix[idx] = Number(e.target.value);

          setMatrix(newMatrix);
        };

        return <input type="text" onChange={onChange} value={num} />;
      })}

      <button onClick={solveHandler}>solve</button>
      <p>Answer : {solution}</p>
    </div>
  );
}

函数添加（）{
const[matrix，setMatrix]=React.useState（Array.from（{length:8}）.fill（0））；
const[solution，setSolution]=useState（null）；
返回(
{matrix.map（（num，idx）=>{
const onChange=e=>{
常数newMatrix=[…矩阵]；
newMatrix[idx]=数字（即目标值）；
setMatrix（newMatrix）；
};
返回；
})}
解决
回答：{解决方案}

);
}

我写了这样的代码

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

export default function App() {
  const [values, setValues] = useState([0, 0, 0, 0, 0, 0, 0, 0, 0]);
  const [solution, setSolution] = useState(null);

  const handlerFun = (event, index) => {
    console.log(index);
    console.log(event);
    let temp = [...values];
    temp[index] = event.target.value;
    setValues(temp);
  };

  const solveHandler = () => {
    let sub1 = values[4] * values[8] - values[7] * values[5];
    let sub2 = values[3] * values[8] - values[6] * values[6];
    let sub3 = values[3] * values[7] - values[4] * values[6];
    let answer = values[0] * sub1 - values[1] * sub2 + values[2] * sub3;
    setSolution(answer);
  };

  return (
    <div className="App">
      {values.map((x, index) => {
        return (
          <>
            <div>
              {" "}
              <input
                type="text"
                onChange={(event) => {
                  handlerFun(event, index);
                }}
                value={x}
              />
            </div>
            <span> {(index + 1) % 3 === 0 ? <br /> : ""}</span>
          </>
        );
      })}
      <br />
      <br />
      <button onClick={solveHandler}>solve</button>
      <p>Answer : {solution}</p>
    </div>
  );
}

import React，{useState}来自“React”；
导入“/styles.css”；
导出默认函数App（）{
const[values，setValues]=useState（[0,0,0,0,0,0,0]）；
const[solution，setSolution]=useState（null）；
const handlerFun=（事件、索引）=>{
控制台日志（索引）；
console.log（事件）；
设temp=[…值]；
temp[索引]=event.target.value；
设定值（温度）；
};
常量solveHandler=（）=>{
设sub1=值[4]*值[8]-值[7]*值[5]；
设sub2=值[3]*值[8]-值[6]*值[6]；
设sub3=值[3]*值[7]-值[4]*值[6]；
设answer=values[0]*sub1-values[1]*sub2+values[2]*sub3；
设置解决方案（答案）；
};
返回(
{values.map（（x，索引）=>{
返回(
{" "}