Question

我创建了用于通过菜单项呈现选择列表的功能组件，这些菜单项具有从外部提供程序提供的数据。当更改选择项时，预期的行为再次呈现为选择列表。我创建了状态并对其进行了初始化，然后从状态映射了下一个项目，并使用状态参数来管理组件内部的逻辑，但是……不幸的是，设置状态执行不会产生任何效果。设置状态后如何再次渲染组件？我的代码如下：


 class TemplateMenuItem{
     constructor(index, displayName, menuItem, isSelected){
         this.index = index;
         this.displayName = displayName;
         this.menuItem = menuItem;
         this.isSelected = isSelected;
     }
  }

  export const SetTemplateVariables = (props) => {

   ...

   const [items, setItem] = React.useState(variablePlaceholders.map(
        (x, index) => new TemplateMenuItem(index, x.displayName, 0, false)
   ));

   const handleChange = (index, displayName, menuItem) => {
       let placeholderIndex = items.findIndex(x => x.index === index);
       items[placeholderIndex] = new TemplateMenuItem(index, displayName, menuItem, true);
       setItem(items);
   }

    return(
        <FormGroup>
            {items.map(({index, displayName}, placeholderIndex) =>
                <FormControl variant="outlined" className={styles.formControl}>
                    <Container>
                        <InputLabel id={`label-${index}`}>{displayName}</InputLabel>
                        <Select id={displayName}
                                className={styles.select}
                                labelId={`label-${index}`}
                                autoWidth={false}
                                onChange={(e) =>
                                    handleChange(placeholderIndex, displayName, e.target.value)}
                                value={items[placeholderIndex].menuItem}>
                            {stepData.map((item, stepIndex) => <MenuItem value={stepIndex}>{item}</MenuItem>)}
                        </Select>
                    </Container>
            </FormControl>)}
        </FormGroup>
    );

谢谢您的回答！

Answer 1

此问题是状态突变。找到索引并更新并在该索引上设置新元素后，可以使用当前渲染周期中相同的数组引用来更新状态。

from autoslug import AutoSlugField

class Quiz(models.Model):
    # …
    url = AutoSlugField(
        populate_from='title',
        unique=True
    )

React需要一个新的数组引用来正确获取状态更新。这与array :: map无关紧要。将项目映射到新数组中，并使用当前索引的第二个参数来匹配传递的索引，以映射新的const handleChange = (index, displayName, menuItem) => { let placeholderIndex = items.findIndex(x => x.index === index); // state mutation! items[placeholderIndex] = new TemplateMenuItem(index, displayName, menuItem, true); // save existing reference back in state! setItem(items); }。

TemplateMenuItem

状态未在FormGroup中更新

1 个答案: