如何将所有数组值存储到单个 React 状态中？

Question

我有一个配置文件，其中包含一个从 redux 获取数据的数组

"datapath": [
  "common.registration.rgsnInfoRs[0].value",  // street name
  "common.registration.rgsnInfoRs[1].value",  // city
  "common.registration.rgsnInfoRs[2].value",  // state
  "common.registration.rgsnInfoRs[3].value"   // zip code
]

在我的 React 组件中，当我尝试从该数组中呈现数据时，它仅 returns 返回邮政编码的数据。如何让我的组件在我的渲染方法中渲染所有索引数据？

constructor(props) {
  super(props);
  this.state = {
    // data: '',
    data: []
  }
}
componentDidMount(){
  if(_.get(this.props, 'datapath')){
    _.map(this.props.datapath, (item, i) => {
      let data=_.get(this.props.state,`i`);
      this.setState({data})
    })
  }
}

// static getDerivedStateFromProps(props, state) {
//   if(_.get(props, 'datapath')){
//     _.map(props.datapath, (item, i) => {
//       let data=_.get(props.state,item);
//       state.data = data;
//     }) 
//   }
// }


static getDerivedStateFromProps(props, state) {
    if(_.get(props, 'datapath')){
      _.map(props.datapath, (item, i) => {
        let data=_.get(props.state,item);
        this.setState((prevState) => {
          return { data: [...prevState.data, data] }
         });
      })
    }
  }

render() {
  const {type, label} = this.props;
  return (
    type === "grid" ? (
      <Grid.Column style={style}>
        <strong>{label ? `${label}:` : null}</strong> {this.state.data}
      </Grid.Column>
    ) : (
      null
    )
  )
}

Answer 1

我认为，当您遍历数据并设置状态时，您正在覆盖状态中已经存在的旧数据。

可能您必须包括以前的数据并在其中设置新数据，类似于这样。

this.setState({data : [...this.state.data, data]})

Answer 2

this.state.data 的初始数据类型是数组。但在下一行中，它获取项目的值（在本例中，它是街道名称、城市、州或邮政编码）。这些值是字符串类型，并且将 this.state.data 数据类型从数组覆盖为字符串。

let data=_.get(props.state, `i`); // This is incorrect

您应该在状态数据中附加值而不是在 componentDidMount

中赋值

componentDidMount() {
  if(_.get(this.props, 'datapath')){
    _.map(this.props.datapath, (item, i) => {
       let data=_.get(this.props.state,`i`);
       this.setState((prevState) => {
          return { data: [...prevState.data, data] }
        });
    })
  }
}

现在让我们看看getDerivedStateFromProps函数。这是一个静态函数，您不能在静态函数内部使用 this。根据react docs，这个函数returns更新状态。

static getDerivedStateFromProps(props, state) {
const newData = [];
if(_.get(props, 'datapath')) {
  _.map(props.datapath, (item, i) => {
    let data=_.get(props.state,item);
    newData.push(data);
  });
  return { data: newData };
}

}

Answer 3

我认为你问的问题不对。将 props 中的数据存储在状态中通常是一个坏主意，因为它会导致陈旧和过时的数据。如果您已经可以从道具访问它，那么您不需要也让它处于状态。

您的组件接收一个 prop state，它是一个对象和一个 prop datapath，它是一个路径数组，用于访问 state 上的属性。这已经很奇怪了，您应该研究更好的模式来通过选择器函数访问 redux 数据。

但如果我们不能改变它，我们至少可以改变这个组件。您可以使用一行代码将路径数组转换为值数组：

const data = this.props.datapath.map( path => _.get(this.props.state, path) );

组件中的所有状态和生命周期都是不必要的。可以简化为：

class MyComponent extends React.Component {
  render() {
    const { type, label = "", state, datapath = [] } = this.props;
    const data = datapath.map((path) => _.get(state, path, ''));
    return type === "grid" ? (
      <Grid.Column style={style}>
        <strong>{label}</strong> {data.join(", ")}
      </Grid.Column>
    ) : null;
  }
}

如何将所有数组值存储到单个 React 状态中？

How to store all array values into a single React state?

javascript

lodash

reactjs

redux