Question

我已经使用A初始化了一些常量，可以说getDerivedStateFromProps。现在，我想使用setState更新某些操作的值，但是它不起作用。

constructor(props) {

  super(props)
  this.state = {
   A: []
  }

  static getDerivedStateFromProps(nextProps, prevState) {
   const A = nextProps.A
   return {
    A
   }
  }

  handleDragStart(e,data) {
    e.dataTransfer.setData('item', data)
  }

  handleDragOver(e) {

    e.preventDefault()
  }
  handleDrop(e, cat) {
    const id = e.dataTransfer.getData('item')

    const item = find(propEq('id', Number(id)), this.state.A)
    const data = {
     ...item.data,
     category: cat,
    }

    const val = {
     ...item,
     data
    }

    this.setState({
     A: item,
    })
  }

}
**Listing the items and Drag and Drop to Categorize**
{this.state.A.map((item, index) => (
                  <ListRow
                    key={`lm${index}`}
                    draggable
                    name={item.name ? item.name : ''}
                    description={item.data ? item.data.description : ''}
                    type={item.data ? item.data.target_types : ''}
                    source={item.data ? item.data.source : ''}
                    stars={item.data ? item.data.stars : []}
                    onDragStart={e => this.handleDragStart(e, item.id)}
                    onDragOver={e => this.handleDragOver(e)}
                    onDrop={e => this.handleDrop(e, 'process')}
                    onModal={() => this.handleToggleModal(item)}
                  />
                ))}

我希望A的值是HandleDrop的一项，但它返回的值与getDerivedStateFromProps加载的值相同。

Answer 1

这是我解决此问题的方法。

我使用componentDidUpdate而不是getDerivedStatesFromProps。

componentDidUpdate(prevProps) {
     if (!equals(this.props.A, prevPropsA)) {
      const A = this.props.A
      this.setState({
       A
      })
     }
    }

handleDrop功能为

handleDrop(e, cat) {
            const id = e.dataTransfer.getData('item')
            const item = find(propEq('id', Number(id)), this.state.A)
            const data = {
             ....data,
             category: cat,
            }
            const val = {
             ...quota,
             data
            }

            let {A} = this.state

            const index = findIndex(propEq('id', Number(id)), A)
            if (!equals(index, -1)) {
             A = update(index, val, A)
            }
            this.setState({
             A
            })
           }

非常感谢您的帮助。任何建议或反馈，以优化此溶胶将不胜感激。谢谢

“如何在某些操作上更新从getDerivedStateFromProps初始化的项目的值”？

1 个答案: