Question

我有这个组件，它执行post request并映射作为回报的json数据。在此响应上，我执行setState并将数据映射到回调中。我这样做是因为setState的异步性质。

我希望能够在val的范围之外使用key和render()，但是我不确定如何实现。

LoadCard：

class LoadCard extends Component {
  constructor(props) {
    super(props);
    this.state = {
      req: [],
    }
  }

  componentDidMount() {
    axios.post(hostname, {
      request: "?request=getObjects"
    })
      .then(response => {
        this.setState({
          req: JSON.parse(response.data)
        },
          () => this.state.req.objects.map((val, key) => {
            // after mapping what to do here?
          })
        );
      })
      .catch(error => {
        console.log("Error: Card/componentDidMount: " + error);
      });
  }

  render() {
    return (
      <Card key={key} title={val.name} /> /* use val and key here */
    );
  }
}

在组件的渲染中，我希望能够使用val和key作为Card组件的道具。

卡：

class Card extends Component {
  render() {
    return (
      <View key={this.props.key}>
        <Text>{this.props.title}</Text>
      </View>
    );
  }
}

编辑以适合评论问题：

我返回的响应数据如下：

{
    "objects": [
        {
            "zone_id_1": 151,
            "zone_id_2": null,
            "blocked": "Y",
            "type_id": 1,
            "name": "Alarm chauffeurs@ON=100",
            "output_value": 0,
            "object_id": 1,
            "input_value": 100,
            "last_changed": "2019-04-04T11:36:53",
            "continuously_high_enabled": "N"
        },
        {
            "zone_id_1": 150,
            "zone_id_2": null,
            "blocked": "N",
            "type_id": 1,
            "name": "Alarm office@ON=0",
            "output_value": 0,
            "object_id": 2,
            "input_value": 0,
            "last_changed": "2019-03-26T15:52:01",
            "continuously_high_enabled": "N"
        },

    ]
}

Answer 1

您应该在渲染函数中运行该函数，一旦setState完成，就会触发该事件。

您的状态应具有处理前的数据，并在获取数据后具有相同的结构。还是在render方法中进行验证以检查值是否存在，但这会浪费几行代码。

默认状态：{data：[]} //初始化状态-数组
在setState（{data：req.objects}）上//在axios响应中-具有以下内容的数组值

您的渲染器应该访问它

source activate opencv_test

由于您在渲染函数中使用了“ req”状态，它将随着状态中req值的更新而自动更新。

React是一个非常强大的工具，我认为每个人都应该阅读它的工作原理以及为什么会如此工作。

Answer 2

我认为您在这里误解了setState的行为。不要在this.state.req.objects回调中映射到setState。

相反：

class Card extends Component {
  render() {
    return this.state.req.objects.map((val, key) => (
      <View key={key}>
        <Text>{val.title}</Text>
      </View>
    ));
  }
}

显然，请确保正确初始化您的状态。例如，将objects: []添加到req。

如何在setState回调之外将.map（）val和key呈现为prop

2 个答案: