如何使用 ReactJS 正确迭代存储在状态中的 JSON？

Question

我想遍历我的 jsondata 以删除元素，但我收到以下错误 this.state.jsondata is not iterable。我有点理解这个问题，据我所知，我必须遍历 this.state.jsondata 中的项目，但我不知道如何解决它。在我尝试制作 jsondata

的单独副本时出现错误

export default class Success extends React.Component {

    constructor(props) {
        super();
        if (props.location.state) {
            this.state = {
                jsondata: props.location.state.referrer,
                upload: true
                
            } //put jsons data in state object
            toast.success('Upload success')
        } else {
            this.state = {
                upload: false
            }
        }
    }   
    
    removeData(e) {
      console.log(e)
      var array = [...this.state.jsondata]; // make a separate copy
      var index = e;
      if (index !== -1) {
        array.splice(index, 1);
        this.setState({jsondata: array});
      }
    }

    render() {
        const occurrenceMap = Object.values(this.state.jsondata.prediction).reduce((finalMap, item) => {
          finalMap[item] = ++finalMap[item] || 1; 
          
          return finalMap;
        } , {})

        console.log(occurrenceMap)
        
        if (!this.state.upload) {
            return <Redirect push to={{
                pathname: "/"
            }}/>
        } else return (
            <div className="container">                              
                <div className="row">
                    <Table striped bordered hover>
                      <thead>
                        <tr>
                          <th>#</th>
                          <th>Label</th>
                          <th>Text</th>
                          <th>Prediction</th>
                          <th>Validation</th>
                        </tr>
                      </thead>
                      <tbody>
                        {Object.keys(this.state.jsondata.label).map(k =>
                            <tr>
                                <td>{k}</td>
                                <td>{this.state.jsondata.label[k]}</td>
                                <td>{this.state.jsondata.text[k]}</td>
                                <td>{this.state.jsondata.prediction[k]}</td>
                                <td>
                                    <Button variant="success" onClick={() => { alert('Validation') }}>Valider</Button>{' '}
                                    <Button variant="danger" onClick={() => { this.removeData(k) }}>Annuler</Button>
                                </td>
                            </tr>
                        )}                  
                      </tbody>
                    </Table>
                </div>
            </div>
        )
    }
}

这里是jsondata:

{label: {…}, text: {…}, prediction: {…}}
label: {0: 0, 1: 0, 2: 0, 3: 0, 4: 0}
prediction: {0: 2, 1: 2, 2: 2, 3: 2, 4: 2}
text: {0: "- abc", 1: "abc", 2: "abc", 3: "abc", 4: "abc"}
__proto__: Object

Answer 1

您的 this.state.jsonData 不是数组，因此您不能将其散布在 [] 中。

const removeData = (keyToRemove) => {
// create a deep copy of the object
const clonedJsonData = JSON.parse(JSON.stringify(this.state.jsonData))
// now mutate this cloned object directly
Object.keys(clonedJsonData).forEach(key => delete clonedJsonData[key][keyToRemove])
// set the state
this.setState({jsondata: clonedJsonData})
}

如何使用 ReactJS 正确迭代存储在状态中的 JSON？

How to correctly iterate over a JSON stored in state using ReactJS?

arrays

json

reactjs

react-state