Question

我无法访问从数据库中获取的状态内的数据，这是我的状态：

state = {
    inputDataArr: [],
    inputDataArrTest: [
      {
        formID: 'test',
        inputArr: [1, 2, 3],
        labelArr: [4, 5, 6]
      }
    ]
  };

这是我从数据库导入的集合：

{
    "_id": {
        "$oid": "5ba96b8ebffd923734090df4"
    },
    "inputArr": [
        "value1",
        "value2",
        "value3"
    ],
    "labelArr": [
        "label1",
        "label2",
        "label3"
    ],
    "formID": "5ba96b83bffd923734090df0",
    "__v": 0
}

是其中有2个数组的对象，这就是我的获取方式：

componentWillMount() {
    fetch('/api/datas')
      .then(data => data.json())
      .then(datas => {
        const filterdDatas = datas.filter(
          data => data.formID == this.props.match.params.id
        );
        this.setState(currentState => ({
          inputDataArr: [...currentState.inputDataArr, ...filterdDatas]
        }));
      });
  }

现在当我控制台记录inputDataArr和inputDataArrTest时，我得到一个数组，里面有一个对象，一模一样，但是当我在状态下看到控制台日志InputDataArrTest [0]时，我可以看到数组和formID，但是当我控制台记录inputDataArr [0]时，我却变得不确定，真令人沮丧，有人知道为什么吗？

Answer 1

我不确定您在哪里运行console.log，但是setState具有一种回调方法，您可以在实际数据更新后运行该回调方法：

this.setState(currentState => ({
  inputDataArr: [...currentState.inputDataArr, ...filterdDatas]
}), () => {
    // this is the callback for setState, you can access the updated data
  console.log(inputDataArr);
});

注意：如果您在console.log中运行render，请记住，第一个render调用将始终在获取异步数据之前运行。 / p>

注释＃2 Do not use componentWillMount，尤其是不用于获取数据。
Use componentDidMount instead。

Answer 2

在渲染器中进行映射和数据处理从来都不是一个好主意，而且调试起来也不容易。

我的建议是将状态初始化为一个空数组，并调用一个方法以返回映射的数据。

constructor(props) {
    super(props);
    this.state = {
        inputDataArr: []
    };
}

render() {
    const data = this.state.inputDataArr.map(...)
    return <div>{data}</div>
}

这样，在第一次渲染之前就启动了状态，data将返回一个空数组。在componentDidMount之后，状态将更新并使用新数据重新呈现。

请注意，我将在第三个then中进行映射，并将状态设置为结果本身。

快乐编码。

Answer 3

在使用filteredDatas之前您已经测试过...filteredDatas吗？也许它不是一个数组，导致其他结果或一个空数组。
您确定this.props.match.params.id已定义并且等于formID属性吗？
如果仅存在一个具有唯一formID的对象，为什么不使用Array#find而不是Array.filter，然后用
更新状态
this.setState（prevState =>（{ dataArr：filteredDatas？ prevState.dataArr.concat（[filteredDatas]）：prevState.dataArr //这里使用Array＃find，filteredDatas为null或对象不是Array }）;

Answer 4

 renderLabels() {
    const { inputDataArr } = this.state;
    return (
      !!inputDataArr.length &&
      inputDataArr[0].labelArr.map((label, index) => (
        <th key={index}>{label}</th>
      ))
    );
  }

条件渲染解决了我的问题

无法访问数组内的数据

4 个答案: