反应：props.itemId 返回不同的值与使用 props.itemId 的变量

Question

目前

我有一个子组件 ItemField（参见下面的代码），它从父组件获取 this.props.itemId，并检查是否填充了 this.props.itemId，并根据检查即

itemId = this.props.itemId ? this.props.itemId : "new";

问题

在应用程序上移动项目列表中项目位置的排序操作，导致this.props.itemId 和this.itemId 返回控制台日志确认的不同值。 this.props.itemId 具有正确的值，但 this.itemId 包含该位置项的原始值。

ItemField.js

class ItemField extends Component {

  constructor(props) {
    super(props);
    this.state = {
      //temp value of inputs
      }
    }

  componentDidMount() {
    //no actions on did mount
  }

  //issueId to be Updated
  //if "new", then a new issue will be updated
  itemId = this.props.itemId ? this.props.itemId : "new";

  render() {
    console.log("this.props.itemId = " + this.props.itemId); //logs "1111"
    console.log("this.itemId = " + this.itemId); //should log "1111" i.e. same as above, but this doesn't always happen

    return (
      <div
        id={this.itemId}
      >{showValue}
      </div>
    )
  }
}

export default ItemField;

问题

我在上面的脚本中有 2 个 console.log 行，在某些情况下（例如，在对项目列表进行排序之后）返回不同的值。这些应该始终相同。这可能是什么原因？

注意事项：

1. 我尝试将itemId = this.props.itemId ? this.props.itemId : "new" 行移到构造函数和componentDidMount 中，但这并没有解决问题。
2. 我没有映射父组件中的所有 ItemField，而是为每个组件显式创建一个组件，例如<ItemField value={this.props.item.name} itemId={this.props.item.id} /> 其中name 是字段值，id 是传递给所有字段的 itemId。

组件结构

Answer 1

它不会在运行一次时更新，以确保两者始终具有相同的值移动

itemId = this.props.itemId ? this.props.itemId : 'new';

在状态中渲染或保存它并使用getDerivedStateFromProps更新值。

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.0/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.0/umd/react-dom.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.21.1/babel.min.js"></script>
<div id="root"></div>

<script type="text/babel">
class ItemField extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      //temp value of inputs
      itemId: '',
    };
  }

  componentDidMount = () => {
    //no actions on did mount
    this.setState({
      itemId: this.props.itemId ? this.props.itemId : 'new'
    })
  }


  //issueId to be Updated
  //if "new", then a new issue will be updated

  static getDerivedStateFromProps = (props, state) => {
    // compare props with state data
    // if they are not equal return props
    // or return null
    // more info here https://reactjs.org/docs/react-component.html#static-getderivedstatefromprops
    
    if (props.itemId !== state.itemId) {
      return props;
    }
    return null;
  }

  render() {
    console.log('this.props.itemId = ' + this.props.itemId); //logs "1111"
    console.log('this.state.itemId = ' + this.state.itemId); //should log "1111" i.e. same as above, but this doesn't always happen

    return <div id={this.itemId}>{'showValue'}</div>;
  }
}

class App extends React.Component {

  state = {
    id: 1111
  }

  render() {
    return (
      <div>
        <button onClick={() => this.setState({ id: 2233 })}>Update ID</button>
        <ItemField value={'James'} itemId={this.state.id} />
      </div>
    );
  }
}
ReactDOM.render(<App />, document.getElementById('root'));
</script>

Answer 2

MOVE ITEMID内的状态AKA̶̶̶t̶̶̶h̶̶̶i̶̶̶s̶̶̶.̶̶̶s̶̶̶t̶̶̶a̶̶̶t̶̶̶e̶̶̶̶̶̶=̶̶̶{̶̶̶ITEMID：̶̶̶t̶̶̶h̶̶̶i̶̶̶s̶̶̶.̶̶̶p̶̶̶r̶̶̶o̶̶̶p̶̶̶s̶̶̶.̶̶̶i̶̶̶t̶̶̶e̶̶̶m̶̶̶I̶̶̶d̶̶̶}̶̶̶和实施̶̶̶̶̶̶̶̶̶̶̶̶̶̶̶̶̶̶̶̶̶̶c̶̶̶o̶̶̶m̶̶̶p̶̶̶o̶̶̶n̶̶̶e̶̶̶n̶̶̶t̶̶̶D̶̶̶i̶̶̶d̶̶̶U̶̶̶p̶̶̶d̶̶̶a̶̶̶t̶̶̶e̶̶̶(̶̶̶p̶̶̶r̶̶̶e̶̶̶v̶̶̶P̶̶̶r̶̶̶o̶̶̶p̶̶̶s̶̶̶,̶̶̶ ̶̶̶p̶̶̶r̶̶̶e̶̶̶v̶̶̶S̶̶̶t̶̶̶a̶̶̶t̶̶̶e̶̶̶,̶̶̶ ̶̶̶s̶̶̶n̶̶̶a̶̶̶p̶̶̶s̶̶̶h̶̶̶o̶̶̶t̶̶̶)̶̶̶{̶̶̶ ̶̶̶ ̶̶ ̶̶̶ ̶̶̶ ̶̶̶ ̶̶̶i̶̶̶f̶̶̶ ̶̶̶(̶̶̶t̶̶̶h̶̶̶i̶̶̶s̶̶̶.̶̶̶p̶̶̶r̶̶̶o̶̶̶p̶̶̶s̶̶̶.̶̶̶i̶̶̶t̶̶̶e̶̶̶m̶̶̶I̶̶̶d̶̶̶ ̶̶̶!̶̶̶=̶̶̶=̶̶̶ ̶̶̶p̶̶̶r̶̶̶e̶̶̶v̶̶̶P̶̶̶r̶̶̶o̶̶̶p̶̶̶s̶̶̶.̶̶̶i̶̶̶t̶̶̶e̶̶̶m̶̶̶I̶̶̶d̶̶̶)̶̶̶ ̶̶̶{̶̶̶ ̶̶ ̶̶̶ ̶̶̶ ̶̶̶ ̶̶̶ ̶̶̶ ̶̶̶ ̶̶̶ ̶̶̶t̶̶̶h̶̶̶i̶̶̶s̶̶̶.̶̶̶s̶̶̶e̶̶̶t̶̶̶S̶̶̶t̶̶̶a̶̶̶t̶̶̶e̶̶̶(̶̶̶{̶̶̶i̶̶̶t̶̶̶e̶̶̶m̶̶̶I̶̶̶d̶̶̶:̶̶̶t̶̶̶h̶̶̶i̶̶̶s̶̶̶.̶̶̶p̶̶̶r̶̶̶o̶̶̶p̶̶̶s̶̶̶.̶̶̶i̶̶̶t̶̶̶e̶̶̶m̶̶̶I̶̶̶d̶̶̶}̶̶̶)̶̶̶ ̶̶ ̶̶̶ ̶̶̶ ̶̶̶ ̶̶̶ ̶̶̶ ̶̶̶}̶̶̶ ̶̶ ̶̶ ̶̶̶ ̶̶̶ ̶̶̶ ̶̶̶}̶̶̶̶̶̶ P>

为什么你甚至需要 itemId 老实说？直接使用 props 即可。

 return (
  <div
    id={this.props.itemId || 'new' }
  >{showValue}
  </div>
)