选择值不会随着 React 的变化而更新

Question

当我在选择、占位符或标签中选择选项时，它不会更新为所选值。我没有更多的想法如何解决它:(

我有两个组件。第一：

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>
  )
 }
}

当我选择一个位置时，我选择的标签仍然是“选择位置”而不是一个值。这里不想贴太多代码，其实是多步的形式。在 AssignPosition 我选择位置，然后单击“下一步”进行摘要。重要的是，当我点击“下一步”然后在选择标签中点击“返回”时，会有一个正确的值，所以它会更新但不知何故为时已晚......

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

编辑：我发现了一个问题。 在 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 时，选择可以正常工作，但 MaterialTable 中的选择不能：/ 任何想法如何解决它？

Answer 1

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