Question

我正在尝试从fetch获取数据，并“刷新”页面，并使用新的道具来表明它们的值是来自fetch的数据

提交=（）=> {

let user = {
  email: this.props.email,
  newuser: this.state.new_username
};

fetch("http://192.168.2.45/backend/public/api/update", {
  method: "POST",
  body: JSON.stringify(user),
  headers: new Headers({
    "Content-Type": "application/json"
  })
})
  .then(res => res.json())
  .then(responseJson=>Actions.refresh({username:responseJson}) )
  .catch(error => console.error("error:", error));

};

render（）{ 返回（

    <View style={{ alignItems: "center" }}>
      <Text style={styles.name}>{this.props.username}</Text>

    </View>

我正在某种程度上尝试使用responseJson并用其值更新我的props.username，但是它似乎没有更新

Answer 1

使用State代替Props

 fetch("http://192.168.2.45/backend/public/api/update", {
      method: "POST",
      body: JSON.stringify(user),
      headers: new Headers({
        "Content-Type": "application/json"
      })
    })
      .then(res => res.json())
      .then(responseJson=>this.setState({username:responseJson}) )
      .catch(error => console.error("error:", error));

    <View style={{ alignItems: "center" }}>
          <Text style={styles.name}>{this.state.username}</Text>

        </View>

Answer 2

道具是只读的，因此您不能从接收它们的组件内部直接更新它们。状态是这种变化的机制。听起来您是从父级那里获得了初始状态，因此您可以处理一些其他事情。

一件事是使获取操作发生在父组件中，更新父组件的状态，并将状态值作为道具传递给该组件。这样，道具和国家之间就不会发生冲突。

另一种可能性是，如果事实属实，则只能提供状态，否则将退回给道具。

constructor(props) {
  this.state = {
    username: ""
  }
}
render() {
  return (
    <View style={{ alignItems: "center" }}>
      <Text style={styles.name}>{this.state.username || this.props.username}</Text>
    </View>
  )
}

这是基本上可以工作的一种方法，但React不推荐。

constructor(props) {
  this.state = {
    username: props.username
  }
}

（在所有这些情况下，如Roopak PutheVeettil在其评论中所述，您将在获取数据时更新状态。）

如果您确实必须合成一个随时间变化的更新状态和道具，则可以使用componentDidUpdate()和getDerivedStateFromProps()来做更复杂的事情，但是您在这里不需要这样做。 / p>

获取数据后如何更新道具

2 个答案: