我可以在 React 中动态创建状态变量吗？

Question

这是我正在处理的 React 项目的一个非常简化的版本。基本上，我有一个 JSON 文件（称为 data.json），其中包含一个名为“数据”的属性。该属性包含一个未知数量的对象数组，每个对象都有称为“id”和“值”的键/值对。

JSON文件被导入到App.js中，我需要在其中创建多个状态变量，每个状态变量都基于数组中的一个对象，具有以下先决条件：

1. 每个状态变量都必须有一个唯一的名称，基于相关对象的“id”属性（例如 data1_state、data2_state 等）
2. 每个状态变量的初始值必须等于同一个对象的'value'属性
3. 每个状态变量都必须作为唯一的 <input> 字段的值返回

data.json:

{
    "data": [
        {
            "id": "data1",
            "value": 10
        },
        {
            "id": "data2",
            "value": 3
        },
        {
            "id": "data3",
            "value": 8
        },
        etc...
        etc...
        etc...
    ]
}

这就是我为 App.js 所拥有的

import React, { useState } from 'react';
import Data from './data.json';

const data = Data.data;

const App = () => {
  return <>
    {data.map(item => (
      <div key={item.id}>
        <label>{item.id}: <input type="text" value={/* STATE VARIABLE GOES HERE */} /></label>
      </div>
    ))}
  </>;
}

export default App;

本质上，我正在寻找一种写作方式

const[item.id + '_state', 'set' + item.id + '_state'] = useState(item.value);

对于数据数组中的每个对象（这种方式不起作用）。这可以吗？

Answer 1

创建另一个组件，您将在其中将这些值作为道具传递。您可以使用它们来初始化状态，或者只是在内部渲染它们。

Answer 2

正如你提到的，使用钩子。

import React, { useState } from 'react';
import Data from './data.json';

const data = Data.data;

const App = () => {
  const [stateData, setStateData] = useState(data);
  return <>
    {stateData.map(item => (
      <div key={item.id}>
        <p>{item.id}: <strong>{dataX_state}</strong></p>
      </div>
    ))}
  </>;
}

export default App;

Answer 3

我喜欢 Aison 的回答，但它的某些方面让我感到困扰。我会做的略有不同。获取组件挂载中的数据（使用useEffect），然后设置状态：

import React, { useState, useEffect } from 'react';

const App = () => {
  const [stateData, setStateData] = useState(null);

  useEffect(() => {
    fetch('./data.json')
      .then(Data => setStateData(Data.data))
  }, [])

  return <>
    {stateData && stateData.map(item => (
      <div key={item.id}>
        <p>{item.id}: <strong>{dataX_state}</strong></p>
      </div>
    ))}
  </>;
}

export default App;

就通常如何完成数据获取而言，这更现实一些。