Material-UI AutoComplete 仅在第二次单击时加载值

Question

在我的反应应用程序中，我有 3 个下拉列表 第一个 drop 具有主要值（例如：a，b）下一个 drop 将使用第一个 drop 中选择的值过滤数组中的值 我正在为 Dropbox 使用 ui 和 Autocomplete 材料 当我在第一个 drop 中选择值时，组件在单击时将值返回给父级，然后我用这些值调用第二个 drop

<Grid item xs={4}>
          <Dropdownlist
            required
            name='opt1'
            texto='where:'
            click={click1}
            options={options}
            optionsList1={optionsList1}
            filter='regiao'
          />
        </Grid>
        <Grid item xs={4}>
          {optionNameShow2 === 'hidden' ? null
            : <Dropdownlist
              required
              name='opt2'
              select3='hidden'
              texto='&nbsp;'
              click={click2}
              options={options2}
              valueforFilter={selectState1 ? selectState1.optionValue : ''}
              optionsList2={optionsList2}
              filter='local'
              />}
        </Grid>

问题是我第二次点击的时候才加载值。

到目前为止，问题是在 chrome 和 FF 上测试 并且应该是第一次点击。

工作示例正在运行：https://codesandbox.io/s/muddy-haze-6c1kj?file=/src/App.js

Answer 1

TL;DR：您的filterlists() 触发了状态更改，但if (value) {... 使用的是调用更改实际反映在当前状态之前的值。我修复了你的pastebin。

NL;PR: setStates 计划在调用它们的函数结束后运行，因此您当前使用的值仍然在更改发生之前。用效果钩子单独处理那些setStates。