时间戳

首页 > 解决方案 > 下拉菜单不会随状态而变化

react-hooks - 下拉菜单不会随状态而变化

问题描述

当我更改下拉菜单时，我希望其他下拉菜单也会更改，但它们不会。

代码

尽管我进行了简化，但这仍然相当复杂，所以为了尽量减少重点，我只把重要的部分放在这里。如需更完整和更有效的代码，请前往codepen

这些是状态变量。templateOptions 描述了 csv 列以及如何映射到我的系统变量。

      const [templateOptions,setTemplateOptions] = React.useState([
      { ingestTemplateId:80, name:'Template 1',
        columns:[
          { id:0, name:'Date', required:true, value:{ id:8, name:'Date' }},
          { id:1, name:'Classification', required:true, value:{ id:7, name:'Classification' }}
        ]
      },
      { ingestTemplateId:81, name:'Template 2', 
        columns:[
          { id:0, name:'Level', required:true, value:{ id:27,name:'Level' }},
          { id:1, name:'SSN', required:true, value:{ id:23,name:'SSN' }}
        ]
      }])
      const [ingestTemplate, setIngestTemplate] = React.useState(templateOptions[0]);
      const [templateId, setTemplateId] = React.useState(ingestTemplate.ingestTemplateId);
      const [templateColumns, setTemplateColumns] = React.useState(ingestTemplate.columns);
      const [templateColVals, setTemplateColVals] = React.useState(ingestTemplate.columns.map(c=>c.value));

然后我有了 useEffect，我需要它才能使映射更改生效，但我不确定它的作用......

      React.useEffect(updateStuff,[templateOptions,ingestTemplate,templateId,templateColumns])
      
      function updateStuff(o){
        console.log('UPDATE');
      }

接下来是模板下拉菜单。当它被改变时，它应该更新映射和 csv 列：

      <select defaultValue={templateId} onChange={e=> act_ChangeCurrentTemplate(e)}>
        {templateOptions.map(t=>
          <option value={ t.ingestTemplateId }>
            { t.name }
          </option>
        )}
      </select>

这些是映射下拉列表：

      {templateColVals.map((cv,i)=>{
        let c = templateColumns[i]
        return (
          <select defaultValue={cv.id} onChange={e=>act_ChangeMapping(e, c.id)}>
            { mappingOptions.map(mo=>
              <option 
                key={'c_'+c.ingestTemplateId+'_mo_'+mo.id} 
                id={'mo_'+mo.id}
                value={ mo.id }>
                { mo.name }
              </option>
            )}
          </select>
       })

最后，这是应该更新下拉列表值的函数，但没有。我省略了act_ChangeMapping，因为它要复杂得多并且可以按预期工作

  function act_ChangeCurrentTemplate(e){
    let newIT = templateOptions.filter(t=>Number(t.ingestTemplateId) === Number(e.target.value))[0]
    setIngestTemplate(newIT)
    setTemplateColumns(newIT.columns)
    setTemplateColVals(newIT.columns.map(c=>c.value)) // this change to state does not change the dropdowns' values
    setTemplateName(newIT.name)
    setTemplateId(newIT.ingestTemplateId)
  }

背景和额外信息

这是一个大型应用程序的例外，简化为基本形式。它有助于将数据移植到我的系统中。

用户上传 CSV，然后这有助于他们定义它应该如何映射到我的数据。如您所见，一切都匹配：映射匹配 csv 列以及底部的状态转储。

但是当我更改模板时，除了下拉列表之外的所有内容都会更新：

更改模板不会影响下拉菜单

如您所见，CSV 列更新为级别和 SSN，但映射保留日期和分类。然后，如果您查看状态输出，您可以看到映射本身在状态中发生了变化。

Codepen： https ://codepen.io/travisheeter/pen/YzVbKYm?editors=0010

编辑 1：简化问题以将问题放在前面，并将额外信息移到最后。

标签： react-hooks

解决方案

推荐阅读