Question

我正在尝试从我通过的道具设置组件的初始状态。 prop从App.js传递，从API调用填充它。

当我检查组件状态的值时，没有。怎么会这样？

的代码设置初始状态

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

中填充道具的地方

class BooksApp extends React.Component {
  state = {
    books: []
  }

componentDidMount() {
  console.log("Fetching All Books from API")
  BooksAPI.getAll().then((books) => {
    this.setState({books})
  })
}

我的总体目标是能够更新ListBooks组件中的本地状态 - 因此它会立即更新（尚未完成此部分的代码），然后通过API在后台更新服务器。在每次更新后保存长时间重新加载。

Answer 1

你不应该这样做。

首先在文档中阅读此tutorial。它会告诉你组织你的州的正确方法。

如果你能从道具中获得所需的价值 - 你不应该把它保持在状态 - 只需使用render中的道具。

我的总体目标是能够更新ListBooks组件中的本地状态 - 因此它会立即更新（尚未完成此部分的代码），然后通过API在后台更新服务器。在每次更新后保存长时间重新加载。

这不是一个好主意，因为您需要确保服务器上的数据已成功更改，否则您将显示不可靠的数据，这些数据可能会让用户感到困惑。

例如：让我们假设您有一张从服务器获得的图书清单。然后，用户将新书添加到此列表，然后立即更新state，然后向API发送请求，并出现问题（例如，您发送了无效数据）。在该用户决定更改这个新添加的书的信息之后，但是当他/她将尝试这样做时 - 服务器可能会返回404，因为没有这样的书。这有点令人困惑，不是吗？这有道理吗？我希望如此。

祝你好运，享受你的编码：）

Answer 2

由于以下代码，

Module Main Dim cnnString As String = ConfigurationManager.ConnectionStrings("ConnectionString1") '<-- BREAK HERE (EXCEPTION) Sub Main() // main code End Main End Module未定义：

console.log(this.state.x)

包含两个不能保证在呈现之前完成的异步调用：componentDidMount() { console.log("Fetching All Books from API") BooksAPI.getAll().then((books) => { this.setState({books}) }) }和BooksAPI.getAll()。

但是，正如您对问题的第二条评论所表明的那样，您通过传递的道具设置setState中的状态是很奇怪的。传递道具的要点不需要在获取道具的组件中设置本地状态。

如果你在问题的第4条评论中写道，你在ListBooks内修改了它，那么你可能需要在ListBooks内调用BooksAPI而不传递道具。

从道具

2 个答案: