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

Question

我有一个以字符串形式出现的数组(目前无法更改它)。我收到字符串，需要对字符串化数组执行 JSON.parse() ，以使其再次成为数组。我无法在 componentDidMount 函数中执行此操作，因为在 Redux 中拥有状态组件不是最佳实践。我可以在渲染函数中执行此操作，但就我而言，这并不是在那里改变值的最佳实践。

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

那么如何管理 Redux 展示组件中的 props 突变呢？谢谢!

Answer 1

如果您正在使用 redux，我假设您已经在使用 mapStateToProps 函数，您可以在那里解析它并使其可用于 React 组件

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

}

否则，您可以将 prop 保存为状态变量，因为您需要在 componentWillReceiveProps 和 componentWillMount/componentDidMount 生命周期函数中解析和 setState，因为 componentWillMount 仅调用一次，此后每次渲染时都会调用 componentWillReceiveProps。