Как правильно изменить значение реквизита в компонентах Redux/React?

Question

У меня есть массив, который поставляется в виде строки (и не могу изменить его сейчас). Я получаю String, и мне нужно выполнить JSON.parse() над строковым массивом, чтобы снова сделать его массивом. Я не могу сделать это в функции componentDidMount, потому что не рекомендуется использовать компонент состояния в Redux. Я мог бы сделать это с помощью функции рендеринга, но, насколько я понимаю, это также не лучший способ изменять значения там.

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

Так как же мне управлять мутацией реквизита в презентационном компоненте Redux? Спасибо!

Answer 1

Если вы используете redux, я предполагаю, что вы уже используете функцию mapStateToProps, вы можете проанализировать ее и сделать ее доступной для компонента React

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

}

В противном случае вы можете сохранить реквизит как переменную состояния, для этого вам необходимо выполнить синтаксический анализ и установить setState в componentWillReceiveProps а также componentWillMount/componentDidMount функции жизненного цикла с componentWillMount вызывается только один раз и componentWillReceiveProps вызывается на каждом рендере впоследствии.

Answer 2

Прежде всего, я бы точно не делал мутации в функции рендеринга, так как она будет часто вызываться. Я бы посоветовал прочитать начальные реквизиты в ComponentDidMount, где вы соответствующим образом их мутируете и сохраните во внутреннем состоянии. После этого, если значение может измениться, я бы порекомендовал сделать ту же мутацию в ComponentWillReceiveProps. Я также не верю, что это очень плохая практика - мутировать данные реквизиты, чтобы использовать их. Просто постарайтесь свести к минимуму мутации и не допускать их в функцию рендеринга.