如何在 setState 回調之外將 .map() val 和 key 渲染為 prop

Question

我有這個組件，它執行一個post request並映射我得到的 json 數據作為回報。 在此響應中，我執行setState並映射回調中的數據。 我這樣做是因為 setState 的異步性質。

我希望能夠在render()的范圍之外使用val和key ，但我不確定如何實現這一點。

加載卡：

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 方法中進行 if 驗證以檢查值是否存在，但這會浪費幾行代碼。

• 默認狀態：{data: []} // 初始化狀態 - 數組
• on setState({data: req.objects}) // 在你的 axios 響應中 - 帶有值的數組

你的渲染應該訪問它

  render() {
      const { data } = this.state;
      const Cards = data.map(({title}, key) => {
          return <Card key={key} title={title} />
      })
    
      return(
         <View>
           {Cards}
         </View>
      )
    }

由於您在渲染函數中使用“req”狀態，它會在狀態中的 req 值更新時自動更新。

React 是一個非常強大的工具，我認為每個人都應該閱讀它是如何工作的，以及它為什么會這樣工作。

Answer 2

我認為您在這里誤解了setState的行為。 不要在setState回調中映射this.state.req.objects 。

而是做：

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

顯然，請確保您的狀態已正確初始化。 例如，將objects: []添加到req 。