创建一个具有键值数组的空状态对象，该键值数组以JSON对象作为值，然后更改这些json对象

Question

I am attempting to create a reactJS state that has an empty array in it on construction. Once i receive a message, that is a JSON object, I would want to create a key in that array and store that received message as the value under that key.

for example. I have

array x =[]

JSON_obj = {"data":"mydata"}

in normal javascript I could say

x["some_key"] = JSON_obj

I am attempting accomplish this in reactJS inside the state.

 class App extends Component { constructor(props) { super(props); this.state = { cusipData: [] }; this.socket = io("adresss"); this.socket.on("ringBuffer", function(data) { addMessage(JSON.parse(data)); }); const addMessage = data => { this.setState({ cusipData: this.state.cusipData[data.cusip], data }); console.log("this.state"); console.log(this.state); }; } } 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script> 

Answer 1

I would be careful with using setState when self-referencing this.state in the method as state should remain immutable. This should work.

class App extends Component {
  constructor(props) {
    super(props);

    this.state = {
      cusipData: []
    };

    this.socket = io("adresss");

    this.socket.on("ringBuffer", function(data) {
      addMessage(JSON.parse(data));
    });

    const addMessage = data => {
      this.setState((prevState, props) => {
        const newCusipData = prevState.cusipData;
        newCusipData[data.cusip] = data;

        return {
          cusipData: newCusipData
        };
      });

      console.log("this.state");
      console.log(this.state);
    };
  }
}

Answer 2

The following method addMessage adds the data.cusip parameter to the existing state.cusipData array.

 class App extends Component { constructor(props) { super(props) this.state = { cusipData: [], }; this.socket = io("adresss") this.socket.on('ringBuffer', function(data){ addMessage(JSON.parse(data)); }); const addMessage = data => { // adds the new data.cusip to the existing state array this.setState({ cusipData: [...this.state.cusipData, data.cusip] }); }; }