在反应中有 n 个状态，假设 n 不会在道具中收到

Question

我怎么能在 React 组件中有 n 个状态

假设组件不会在任何 props 中接收到这个 n 值，它会从数据库中获取一些东西

使用 useState 将为每对创建状态 setState，但我需要 n 对

拉斐尔

Answer 1

JavaScript 数组没有固定长度。你可以这样做

const [arr, setArr] = useState([]);

当您从数据库中收到 n 值时，只需使用 setArr(values)

将其设置为数组

现在 arr 将是一个包含从数据库中检索到的 n 元素的数组。然后您可以迭代它并根据需要渲染它们。

Answer 2

正如 T J 指出的那样。您可以在状态中使用数组。

或者，另一种选择是为每个项目映射 n 个组件，从而实例化 n 个状态。

const Example = (props) => {
  const [data, setData] = useState();

  useEffect(() => {
    // ...fetch data
    // setData(data);
  });

  if (data === undefined) {
    return null;
  }

  return data.map((data) => <Item data={data} />);
};

const Item = (props) => {
  const [state, setState] = useState(props.data);

  return <>Example</>;
};

或者如果 n 只是一个数字，一个计数。然后你可以做这样的事情。

const Example = (props) => {
  const [count, setCount] = useState();

  useEffect(() => {
    // ...fetch count
    // setCount(count);
  });

  if (count === undefined) {
    return null;
  }

  const items = [];

  for (var i = 1; i <= count; i++) {
    items.push(<Item />);
  }

  return items;
};

const Item = (props) => {
  const [state, setState] = useState();

  return <>Example</>;
};

在反应中有 n 个状态，假设 n 不会在道具中收到

having n states in react, assuming that n won't be received in props

javascript

checkbox

state

reactjs

react-component