React：如何将数组元素映射到state数组对象并在render中渲染？

需求是将author_array、delay_array、status_array三个数组的元素，分别对应赋值到state中post数组每个对象的author、delay、status字段，最终渲染出每个post的完整信息：

id:"0", author:"Mark", delay:"12", status:"1"
id:"1", author:"Jess", delay:"13", status:"2"
id:"2", author:"Alice", delay:"14", status:"3"

原代码的核心错误 #

• 错误操作this.setState.post：setState是组件的更新方法，不能直接访问this.setState.post，应通过this.state.post获取当前状态数组。
• 数组赋值逻辑完全错误：原代码的map调用没有实现“按索引对应赋值”的逻辑，语法也不符合React规范。
• 渲染逻辑错误：this.state.post是数组，直接取this.state.post.author无法获取单个对象的属性，必须遍历数组渲染每个元素。
• JSX标签错误：混用<text>和<Text>，不符合React/React Native的标签规范。

修正后的完整代码 #

import React, { Component } from 'react';

export default class UserList extends Component {
  constructor(props) {
    super(props);
    this.state = {
      post: [
        { id: "0", author: "", delay: "", status: "" },
        { id: "1", author: "", delay: "", status: "" },
        { id: "2", author: "", delay: "", status: "" }
      ]
    };
    // 绑定方法到组件实例，避免this指向异常
    this.putintostate = this.putintostate.bind(this);
  }

  putintostate() {
    const author_array = ["Mark", "Jess", "Alice"];
    const delay_array = ["12", "13", "14"];
    const status_array = ["1", "2", "3"];

    // 按索引对应赋值，生成新的post数组
    const updatedPosts = this.state.post.map((item, index) => ({
      ...item, // 保留原对象的id字段
      author: author_array[index],
      delay: delay_array[index],
      status: status_array[index]
    }));

    // 正确更新组件状态
    this.setState({ post: updatedPosts });
  }

  componentDidMount() {
    this.putintostate();
  }

  render() {
    return (
      <div>
        {this.state.post.map(post => (
          <div key={post.id}>
            id:"{post.id}", author:"{post.author}", delay:"{post.delay}", status:"{post.status}"
          </div>
        ))}
      </div>
    );
  }
}

关键修正说明 #

1. 方法绑定：在构造函数中绑定putintostate方法，确保方法内的this指向组件实例。
2. 数组赋值逻辑：通过map遍历原post数组，利用索引从三个数据数组中取对应值，展开原对象并更新目标字段，生成新数组后再更新state。
3. 状态更新：使用setState传入新的post数组，符合React状态更新的规范。
4. 渲染逻辑：遍历this.state.post数组，以每个post的id作为唯一key，逐个渲染完整的post信息。
5. 标签修正：使用标准HTML标签<div>（若为React Native场景，可统一替换为<Text>）。

内容的提问来源于stack exchange，提问作者Elly