从道具设置初始状态
我正在尝试设置一个组件的初始状态，从我通过的一个道具。该属性是从App.js传递的，它是由一个API调用填充的。
当我检查组件状态的值时，没有任何值。这怎么可能呢？
下面是从ListBooks.js设置初始状态的代码
class ListBooks extends Component {
constructor(props) {
super(props);
this.state = {
x: props.books
};
console.log("Check if state has been set")
console.log(this.state.x)
}下面是App.js中填充prop的位置
class BooksApp extends React.Component {
state = {
books: []
}
componentDidMount() {
console.log("Fetching All Books from API")
BooksAPI.getAll().then((books) => {
this.setState({books})
})
}我的总体目标是能够更新ListBooks组件中的本地状态-因此它会立即更新(还没有完成这部分的代码)，然后通过API在后台更新服务器。保存每次更新后的长时间重新加载。
回答 2
Stack Overflow用户
发布于 2018-03-22 18:49:36
您不应该肯定地这样做。
首先，在文档中阅读此tutorial。它将向您展示组织状态的正确方法。
如果你能从props中得到你需要的值--你不应该让它保持状态--那就在render中使用props吧。
我的总体目标是能够更新ListBooks组件中的本地状态--这样它就会立即更新(还没有完成这部分的代码)，然后通过API在后台更新服务器。保存每次更新后的长时间重新加载。
这不是一个好主意，因为您需要确保服务器上的数据被成功更改，否则您将显示不可靠的数据，这可能会让用户感到困惑。
例如：假设您有一个从服务器获取的图书列表。然后用户将新书添加到此列表中，您立即更新state，然后向API发送请求，然后出现错误(例如，您发送了无效数据)。在此之后，用户决定更改这本新添加的书的信息，但当他/她尝试这样做时-服务器可能会返回404，因为没有这样的书。这有点让人困惑，不是吗？这有意义吗？要是那样就好了。
祝你好运，享受你的编码:)
Stack Overflow用户
发布于 2018-03-22 18:48:25
由于以下代码，console.log(this.state.x)未定义：
componentDidMount() {
console.log("Fetching All Books from API")
BooksAPI.getAll().then((books) => {
this.setState({books})
})
}包括两个不能保证在呈现之前完成的异步调用：BooksAPI.getAll()和setState。
但是，正如您问题的第二个注释所指出的，奇怪的是，您在ListBooks中通过传递的道具设置状态。传递道具的要点是不需要在获取道具的组件中设置本地状态。
如果，正如你在问题的第4条评论中写的那样，你在ListBooks中修改了它，那么你可能需要在ListBooks中调用BooksAPI，而不是传递道具。
https://stackoverflow.com/questions/49435826
复制
腾讯云开发者
