在 reactJS 中使用基于 props 的动态键初始化状态

Question

如何根据props用动态key初始化state？道具是从外部源（异步）获取的数据。所以当数据下载成功时，道具会发生变化。考虑这样一个组件。

编辑：我想使状态动态化，因为我想根据单击的项目生成一个对话框（弹出）。 DialogContainer 基本上就是这样。 visible 属性将使该对话框可见，而 onHide 属性将隐藏该对话框。我用 react-md library.

class SomeComponent extends React.Component {
  constructor() {
    super();
    this.state = {};
    // the key and value will be dynamically generated, with a loop on the props
    // something like:
    for (const item of this.props.data) {
      this.state[`dialog-visible-${this.props.item.id}`] = false}
    }
  }

  show(id) {
    this.setState({ [`dialog-visible-${id}`]: true });
  }

  hide(id) {
    this.setState({ [`dialog-visible-${id}`]: false });
  }

  render() {
    return (
      <div>
        {this.props.data.map((item) => {
          return (
            <div>
              <div key={item.id} onClick={this.show(item.id)}>
                <h2> Show Dialog on item-{item.id}</h2>
              </div>
              <DialogContainer
                visible={this.state[`dialog-visible-${item.id}`]}
                onHide={this.hide(item.id)}
              >
                <div>
                  <h1> A Dialog that will pop up </h1>
                </div>
              </DialogContainer>
            </div>
          );
        })}
      </div>
    )
  }
}

// the data is fetched by other component.
class OtherComponent extends React.Component {
  componentDidMount() {
    // fetchData come from redux container (mapDispatchToProps)
    this.props.fetchData('https://someUrlToFetchJSONData/')
  }
}

然后通过 Redux 共享数据。

然而，根据我目前的理解，状态可以根据 componentWillReceiveProps 或新的 getDerivedStateFromProps 的 props 进行更新（不是在上面的构造函数中）。但是，如何在任何一种方法上做到这一点？

示例here仅解释了何时在构造函数上初始化状态，并在cWRP或gDSFP上调用setState。但是，我想要动态初始化键值对。

任何 help/hint 将不胜感激。如果我的问题不够清楚，请告诉我。

Answer 1

import React from 'react';
import {connect} from 'react-redux';
import {yourAction} from '../your/action/path';

class YourClass extends React.Component {
    state = {};

    constructor(props){
        super(props);
    }

    componentDidMount(){
        this.props.yourAction()
    }

    render() {
        const {data} = this.props; //your data state from redux is supplied as props.

        return (
            <div>
                {!data ? '' : data.map(item => (
                    <div>{item}</div>
                ))}
            </div>
        )
    }
}

function mapStateToProps(state) {
    return{
        data:state.data //state.data if that is how it is referred to in the redux. Make sure you apply the correct path of state within redux
    }
}

export default connect(mapStateToProps, {yourAction})(YourClass)

如果您这样做，<div>{item}</div> 将随着您更改数据状态而更改。这个想法是将 redux 状态映射到你的 class 道具 - 你不必将道具映射回状态。 render() 自动监听 redux 提供的 props 的变化。但是，如果您确实想以某种方式了解事件中的 redux 状态变化，您可以添加以下函数。

componentWillReceiveProps(newProps){
    console.log(newProps)
}

getDerivedStateFromProps(nextProps, prevState){
    console.log(nextProps);
    console.log(prevState);
}

在 reactJS 中使用基于 props 的动态键初始化状态

Initialize state with dynamic key based on props in reactJS

javascript

javascript-objects

reactjs

computed-properties