javascript - 将道具传递给本地状态初始值是否是一种不好的做法以及如何正确执行

Question

完全新手，希望它足够清楚。谢谢！

我正在尝试更新子组件中的表单并将更改保存到全局状态。全局状态是一个深度嵌套的 json。

      {'userData':
        ['item':
        'education':{
          'school': 'school1';
          'major': 'major1';}
        'education':{
          'school': 'school2';
          'major': 'major2';}
         ]
}}

子组件是一个表单，它取决于从父表单的下拉列表中选择的项目。

我想实现以下目标：

1. 例如，在我的表单字段值中为嵌套 json 列表中的所选项目预填充值

'education':{
          'school': 'school1';
          'major': 'major1';}

2. 根据子表单中更新的字段修改全局状态。globalContext 是定义全局上下文的地方。

const [data, setData] = useContext(globalContext)
const [school, setSchool] = useState('')
const [degree, setDegree] = useState('')

const handleSubmit = (props) => {
    let tmpList = data.user1.userData;

    function findElement(arr, propValue) {
          for (var i=0; i < arr.length; i++)
            if (arr[i].major.concat(' at ', arr[i].school) === propValue)
              return arr[i];}

    var filtered = findElement(tmpList, props)

    filtered.push({school, degree})
       setData({...data,
//                 user1: {
//                     ...data.user1,
//                     userData: filtered
//                     }})
    }

我的问题是，如果用户没有触摸该字段，它将为空，因为它的初始状态是空的。如果我使用道具作为初始状态，那是一个无限循环。也听起来不好的做法。

标签： javascriptreactjs