如何用打字稿解决reactjs中的这个多重选择不起作用答案

【问题标题】：how to solve this mullti select in reactjs with typescript is not working如何用打字稿解决reactjs中的这个多重选择不起作用
【发布时间】：2021-06-24 14:09:52
【问题描述】：

我无法多次选择存在连接错误代码“属性‘连接’不存在于类型‘未知’上。”这是 .tsx 文件

   const DropdownMultiselect =()=>{
        return(
            <>
            <FormControl>
                <Select
                labelId="demo-mutiple-checkbox-label"
                id="demo-mutiple-checkbox"
                multiple
                value={personName}
                onChange={handleChangeMulti}
                input={<Input />}
                placeholder="Enter the Scene"
                renderValue={(selected) => selected.join(',')}
                >
                    {load? <Loader/> :<div className="custom-schedule-dropdown">
                      {sceneResponce.map((scene, index) => 
                      (
                    <MenuItem key={index} value={scene.scene_title}>
                    <Checkbox checked={personName.indexOf(scene.set) > -1} />
                    <div className='image-background'>
                     <img src={schendileIcon.default} className="schedule-icon" />
                     </div>
                    <div>
                     <div className='schedule-scene'>{scene.scene_title+' '+ '|'}{' 
                       '+scene.environment+' '+ '-'}{' '+scene.set}</div>
                     <div className='schedule-location'>{scene.description}</div> 
                     </div>
                    </MenuItem>
                     )
                )}
                </div>}    
                </Select>
      </FormControl>
            </>
        )
    }

屏幕输出：

当我选择它时它没有选择并且它也没有显示

【问题讨论】：

标签： reactjs typescript material-ui react-typescript

【解决方案1】：

unknown 实际上看起来像是 Material UI 类型中的一个错误。 Select 组件应该能够根据您提供的道具推断出 value 类型。这是has been fixed，但在 v5 发布之前不会包含此修复程序。

您需要将selected 的类型设置为any。将其设置为更准确的类型（如 string[]）会由于组件类型中的 unknown 而导致错误。

renderValue={(selected: any) => selected.join(',')}

看起来你的组件中有很多未定义的变量应该作为道具传递。

【讨论】：

【解决方案2】：

在使用 formik 时，我能够做到这一点（您可以根据自己的价值进行修改）

        renderValue={(selected: typeof field['value']) => selected.join(', ')}

【讨论】：