Question

我有一个json文件，其中包含一个数组，其中包含一些json.bc请求显示的名为fetch()的对象。在每个项中都有一个名为renderTotal的函数。 <span className="Total-Price"></span>的值将由renderTotal调用。render中有一个按onclick函数的按钮：

 <button onClick={((e)=>this.ChangePrice(e,this.renderChangePrice(element)))}>Select</button>

renderTotal的值将由ChangePrice函数更改。让我们调试renderTotal中的内容：

    renderTotal(element, NewAmount) {
    let Total = element.total
      if (NewAmount == '') {
        return new Intl.NumberFormat().format(Total)
    } else {
        return Total + NewAmount 
    }

}

renderTotal的输出取决于NewAmount，默认情况下NewAmount为空，如果NewAmount为空，则根据代码，renderTotal的输出为element.total，但通过运行ChangePrice函数NewAmount不为null：

    renderChangePrice(element){
    return 1000
   }
  ChangePrice = (e,elem) =>
  this.setState(
     {
         NewAmount: elem
     },
     () => {
     this.reorganiseLibrary();
     }
 )

例如，通过运行ChangePrice，NewAmount将为1000，并根据renderTotal中的条件，renderTotal的输出将为Total + NewAmount。 renderTotal的输出是：

1000,5000,2000

运行ChangePrice将会是：

2000,6000,3000

知道一切都很好，但是当我第二次运行ChangePrice时，我希望结果是这样的：

3000,7000,4000

我的意思是将NewAmount添加到renderTotal的最后一个输出中，而不是renderTotal的默认输出中，但是我又得到了：

2000,6000,3000

并且每次运行ChangePrice时，renderTotal的输出将为NewAmount + renderTotal的最后一个输出。我该怎么办？

class App extends React.Component {
constructor(props) {
    super(props);
    this.state = {
        data: [],
        library: null,
        NewAmount: "",
    }

}
componentDidMount() {
    fetch('/json.bc', {
        method: 'POST',
    })
        .then(response => response.text())
        .then(text => {
            const Maindata = JSON.parse(text.replace(/\'/g, '"'))
            this.setState(state => ({
                ...state,
                data: Maindata
            }), () => {
                this.reorganiseLibrary()
                         })
        }).catch(error => console.error(error))
   }
    reorganiseLibrary = () => {
    const { data } = this.state;
    let library = data;
    library = _.chunk(library);
    this.setState({library})
   }
   handlePerPage = evt => {
    this.setState({
        perPage: evt.target.value
    }, () => this.reorganiseLibrary());

}
  // handle render of library
   renderLibrary = () => {
    const { library } = this.state;
    if (!library || (library && library.length === 0)) {
        return <div className="nodata">No data</div>
    }
    return library.map((item, i) => (
        <div>
            <span className="Total-Price">{this.renderTotal(item, this.state.NewAmount)}</span>

        </div>

    ))
}

  render() {
    const { library } = this.state;
    return (
        <div>
        {this.renderLibrary()}
        <button onClick={((e)=> this.ChangePrice(e,this.renderChangePrice(element)))}>Select</button>
        </div>
    )
}

renderTotal(element, NewAmount) {
    let Total = element.total
      if (NewAmount == '') {
        return new Intl.NumberFormat().format(Total)
    } else {
        return Total + NewAmount 
    }

}
renderChangePrice(element){
    return 1000
 }
 ChangePrice = (e,elem) =>
 this.setState(
     {
         NewAmount: elem
     },
     () => {
     this.reorganiseLibrary();
     }
 )
 }
 ReactDOM.render(<App />, document.getElementById('Result'))

已编辑：

    renderTotal(element, NewAmount) {
    let Total = element.total
      if (NewAmount == '') {
        return new Intl.NumberFormat().format(Total)
    } else {
        let SliceElementSign = NewAmount.slice(0,1)
        let SliceElementNumber = parseInt(NewAmount.substr(1))
        if (SliceElementSign=='+'){

        return Total+SliceElementNumber
    }else{
         return Total-SliceElementNumber
    }
    }
}

Answer 1

我可以看到您的代码中有几个问题。

您正在将NewAmount的状态从''更改为1000，然后它将永远停留在1000。您不是将值同样更新为1000, 2000, 3000...。
如果您不想更新NewAmount的值，至少可以将library元素的Total的值更新为最新。

当前，每次调用ChangePrice时，都会将NewAmount设置为1000，因为renderChangePrice总是返回1000并将其添加到元素{{1 }}。

按以下方式更新ChangePrice逻辑可能会有所帮助。

Total

如何在Reactjs中更新json对象

1 个答案: