javascript - 使用 ReactJS 循环遍历 JSON 数组，但不了解代码的实际工作方式

Question

我目前正在做一个学校项目，我必须制作一个简单的 CRUD 网络应用程序，我决定使用 Spring Boot + ReactJS。几乎一切都井井有条，除了我开始意识到我已经在不真正了解发生了什么的情况下使部分 React 代码工作(我主要是从不同的教程和官方文档中拼凑出一个解决方案)。

因此，API 包含如下两条消息:

        "messages": [
            {
                "message": "first message",
                "user": "Silb",
            },
            {
                "message": "second message",
                "user": "Silb",
            }
        ]

我的 React 代码如下所示:

const api = 'http://localhost:8080/api/messages/';

class Content extends React.Component {

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

componentDidMount() {
	fetch(api)
	.then(response => response.json())
	.then(data => {
	this.setState(data);
	})
}

  	render() {
  		return(
     //Here is where the data from the API should be displayed
  		<div className="newmessage">
  			<p>User: </p>
  			<p>Message:</p>
  		</div>
  		)
  	}
}

现在，我的理解是 fetch 从 API 获取数据，将其放入 response 变量中，将其解析为 JSON，但在那之后，data变量代表？我什至需要它吗？如果我单独使用 console.log 数据，控制台将返回 JSON，没有任何问题，我什至可以通过调用 this.state.message 和 this.state.user 显示 one 消息，但我真的不不明白我需要做什么来遍历每条消息，以便我可以使用 .map() 函数分别显示每条消息。

我阅读了以下答案: How to map a JSON array to a List in ReactJS?

我认为我对 map 的工作原理有一个模糊的理解，但我仍然无法用我的 JSON 数据创建一个数组。我想我必须将 data 放入我在构造函数中初始化的 messages: [] 数组中，这样我就可以创建一个 newmessage div 与数组中的每个单独的消息，每个消息都有自己唯一的 ID。我说得对吗？

如果我的问题令人费解，我很抱歉，这个周末的大部分时间我都在处理这个问题，看在我的份上，我无法理解这里发生了什么。

在此先感谢并非常感谢您的耐心等待，感谢您提供的任何提示/帮助!

编辑:我忘了提到如果我获取 ' http://localhost:8080/api/messages/1 '，即第一条消息，我可以使用 {this.state.user} 和 {this.state.message} 在 div 上成功显示它，但如果我只需调用/api/messages/

Answer 1

你的问题很明确。您通常做的是在组件的 render() 函数中迭代 this.state.messages 数组，并为每个数组条目返回一个新的子组件，如下所示:

{ this.state.messages.map((message, index) => (
    <div className="newMessage" key={index}>
        <p>User: {message.user}</p>
        <p>Message: {message.message}</p>
    </div>
))}

Javascript's map function迭代数组并使用三个参数调用提供的函数，第一个参数是要遍历的数组条目，这是我们在这里唯一需要的。该函数返回根据需要转换的元素；在这种情况下，您将其转换为 JSX/React 组件。

key prop 被添加到映射的 Array 的每个 div child 中，这是 React 的要求(参见 https://reactjs.org/docs/lists-and-keys.html#keys )。我们使用 Array 索引作为键，这与推荐的做法相反，因为我们没有其他数据来唯一标识每个 child - 例如，您可以散列用户名和消息，但这听起来矫枉过正。