import React, { Component } from "react";
import axios from "axios";
import ReactPlayer from "react-player";
export default class DoctorData extends Component {
state = {
sidebarOpen: true,
courseData: [],
renderData: []
};
componentDidMount() {
let jwtToken = { accessToken: "" };
axios.post(" ", jwtToken).then(data => {
console.log(data);
this.setState({
courseData: data.data.courseDetails.userModuleDetailsV2
});
});
}
RenderComponent = () => {
console.log("we are inside sideBarComponet");
return (
<div className="card">
{this.state.courseData.map((value, key) => {
console.log(value);
console.log("we are inside key", key);
// console.log(value.userLessonDetails[key].userChapterDetails[0].chapter.content)
return (
<div>
<div className="card-header">
<h4>Doctor-content</h4>
<ReactPlayer
url={
value.userLessonDetails[0].userChapterDetails[0].chapter
.content
}
playing
/>
{console.log(
"we are printing the content",
value.userLessonDetails[0].userChapterDetails[0].chapter
.content
)}
{console.log(typeof this.state.courseData)}
</div>
</div>
);
})}
</div>
);
};
render() {
return (
<div>
{this.state.courseData.length ? (
<div>{this.RenderComponent()}</div>
) : null}
{console.log("fghjkl", this.state.courseData)}
{this.state.courseData.length}
</div>
);
}
}
在上面的代码中，我只是从api中获取数据并使用setState存储数据，并通过它进行渲染
这些步骤很令人困惑
componentDidMount() {
let jwtToken = { accessToken: "" };
axios.post(" ", jwtToken).then(data => {
console.log(data);
this.setState({
courseData: this.state.courseData.concat(
data.data.courseDetails.userModuleDetailsV2
)
});
});
}
我使用concat在setState中分配数据
我之前使用过
this.setState({
courseData: data.data.courseDetails.userModuleDetailsV2
})
我教的都是相同的，但是在使用courseData: data.data.courseDetails.userModuleDetailsV2时我的页面没有播放视频，有什么区别吗？但是在以下情况下为什么要播放媒体。
[我试图console.log内容，在两种情况下，内容都是相同的（显示mp4文件）
首先，我从axios获取对象类型，所以我将所需的数据切片并存储在setState中。
State updates should be asynchronous。相反，React通过传递一个将先前状态作为第一个参数的函数来提供previousState，例如
// general
this.setState((oldState) => ({ ...oldState }));
// useful for updating objects
this.setState(({ myObject }) => ({
myObject: { ...myObject, propToUpdate: true }
})
);
.concat()
.concat()方法用于合并两个或多个数组。这个方法不更改现有数组，而是返回一个新数组。
这确认在状态的不变更新中可以安全使用。
请注意，它对任何值都起作用，但是对数组的展平方式。
concat()方法创建一个新数组，该数组由以下元素组成每个对象在其上被调用的顺序参数，该参数的元素（如果参数是数组）或参数本身（如果参数不是数组）。它不是递归到嵌套数组参数中。
concat[1].concat(['test']) //=> [1, "test"]
[1].concat('test') //=> [1, "test"]
[1].concat([['test']]) //=> [1, ["test"]]
创建一个具有旧.concat值和接收到的新值的值的新数组。由于初始状态为空数组this.state.courseData，因此两者均导致相同的[[除非[]不是数组。
data.data.courseDetails.userModuleDetailsV2相当于
this.state.courseData.concat(data.data.courseDetails.userModuleDetailsV2)
所以两者相同，但是这里[].concat(newValues) // or just newValues // if array [newValues] // if something else只是不必要的，因为它在.concat中只被调用一次。[[除非
componentDidMount被用道具或其他地方的默认数据预先填充。删除this.state.courseData时不起作用？
.concat可能不是数组，因此您希望在render方法中使用一个，但是当axios调用成功时（在data.data.courseDetails.userModuleDetailsV2之后），它不再存在。setState也就是说，如果您要添加“获取更多”功能，则使用this.setState({
courseData: this.state.courseData.concat(
data.data.courseDetails.userModuleDetailsV2
)
})
//=> [data.data.courseDetails.userModuleDetailsV2]
this.setState({
courseData: data.data.courseDetails.userModuleDetailsV2
})
//=> data.data.courseDetails.userModuleDetailsV2
可能会很有用。.concat由于（onFetchMore = (offset) => {
fetchMoreAxiosCall(offset)
.then(newData => this.setState(({ courseData }) => ({
courseData: courseData.concat(newData)
})))
}
），您只能在状态内更新所需的值，而不会扩展旧状态（{ ...state, courseData: /**/ }）：
更新程序的输出与状态浅合并。