Question

我以这种方式得到api的回复 data:Array(3) 0:"new" 1:"ruby" 2:"ruby"

我想在jsx表达式中的tr元素下显示这些数据。我做了一个循环遍历数组，就像这样

＆＃13;

let course = [];
		let userid = this.props.match.params.userid;
		axios.get("someapi") //the api to hit request
			.then((response) => {
				console.log(response);
				for (var i = 0; i < response.data.length; i++) {
					console.log(response.data[i]);
					course.push(response.data[i]);
				}
				console.log("course", course);
				this.setState({ course: course });
				console.log("state course", this.state.course);
			});

＆＃13;

我获得了console.log中的所有值，其中＆＃34;当然＆＃34;和＃34;状态课程＆＃34;但是不能将它映射到tbody中以在tr标签中显示它。我想在这个

中渲染它

＆＃13;

<tbody>

  <tr>new,ruby and ruby should be displayed here as a list</tr>

</tbody>

＆＃13;

我做错了什么？

Answer 1

你的桌子里面

<tbody>
{this.state.course.map(ele => 
   <tr>{ele}</tr>
)}
</tbody>

这应该有效。

您还可以参考React doc的部分：List and Key.

Answer 2

如果您希望所有三个课程都在同一个<tr>标记内作为列表，您可以尝试：

let course = [];
let userid = this.props.match.params.userid;
axios.get("someapi") //the api to hit request
    .then((response) => {
        console.log(response);
        course = response.data.join(", ");
        console.log("course", course);
        this.setState({ course: course });
        console.log("state course", this.state.course);
    });

然后在course标记内的jsx中使用<tr>变量。

如果您要为每个课程集tr打印一个courses，等同于response.data，并在您的jsx中将其映射

reactjs：在标签内显示数组数据

2 个答案: