在Redux / React组件中更改props值的正确方法是什么？

Question

I have an array that comes as an String (and cannot change it for now). I receive the String and need to do JSON.parse() over stringified array, to make it an array again. I cannot do it in componentDidMount function, because it's not a best practice to have state component in Redux. I could do it in the render function, but as far I'm concerned it's not also a best practice to mutate values there.

render() {
if (typeof this.props.detectedPersonListJson == 'string'){
      var array= JSON.parse(this.props.detectedPersonListJson);
    }  
 return (
      <div> 
    array.map(...)
</div>

So how can I manage props mutation in Redux's presentational component? Thanks!

Answer 1

If you are using redux, I am assuming you would already be using a mapStateToProps function, you can parse it there and make it available to the React component

function mapStateToProps(state) {
    var array;
    if (typeof state.detectedPersonListJson == 'string'){
      array= JSON.parse(state.detectedPersonListJson);
    }  
    return {
         detectedPersonListJson: array
    }

}

Otherwise you can save the prop as a state variable, for that you need to parse and setState in componentWillReceiveProps and componentWillMount/componentDidMount lifecycle functions since componentWillMount is only called once and componentWillReceiveProps is called on every render thereafter.

Answer 2

First of I would definitely not do the mutation in the render function, since it will be called a lot. What I would suggest is read the initial props in ComponentDidMount where you mutate them accordingly and store it in the internal state. After that, if the value might change, then I would recommend doing the same mutation in ComponentWillReceiveProps. I also don't believe that it is a very bad practice to mutate the given props to use them. Just try to keep the mutations to a minimum and keep them out of the render function.