Select 值不会随着 React 中的更改而更新

Question

当我在 select 中选择选项时，在占位符或标签中它不会更新为所选值。我不知道如何修复它:(

我有两个组成部分。第一：

class CreateProfile extends Component {
  state = {
    position: "",
  };

  addPosition = e => {
    const positionChosen = e.target.value;
    this.setState({
      position: positionChosen
    });
  };

  render() {
    const { position } = this.state;

  return(
   <AssignPosition
    addPosition={this.addPosition}
    position={position}
   />
 )
}
}

在第二个文件中有：

class AssignPosition extends Component {
  render() {
    const { addPosition, position } = this.props

  return(
    <select
       name="select"
       onChange={addPosition}
       value={position}
    >
       <option value="null">Choose position</option>
       <option value="position1">position1</option>
       <option value="position2">position2</option>
       <option value="position3">position3</option>
    </select>
  )
 }
}

当我 select 一个位置时，作为标签仍然 "Choose position" 不是我选择的值。这里不想贴太多代码，其实就是多步形式。在 AssignPosition 中，我选择位置，然后单击 "next" 进行汇总。重要的是，当我单击 "next" 然后单击 select 标签中的 "back" 时，有一个正确的值，因此它得到更新但不知何故太晚了...

如有任何帮助，我们将不胜感激。如果您需要更多代码，请告诉我。

编辑：我发现了一个问题。在 AssignPosition 中我还有 ShouldComponentUpdate 函数。

 shouldComponentUpdate(nextProps) {
    if (this.props.addTest === nextProps.addTest) {
      return false;
    } else {
      return true;
    }
  }

我需要它，因为在同一个组件上我使用了 MaterialTable 而没有这个功能，我遇到了一个问题，描述如下：https://github.com/mbrn/material-table/issues/469 当我删除 ShouldComponentUpdate 时，select 可以正常工作，但是 MaterialTable 中的 selection 不能：/有什么解决办法吗？

Answer 1

如果我理解正确 - 由于某种原因你使用了 shouldComponentUpdate，所以你应该检查 props 中的位置是否改变了。 shouldComponentUpdate 中的条件应该包含 this.props.position === nextProps.position check.

Select 值不会随着 React 中的更改而更新

Select value doesn't update on change in React

select

onchange

reactjs