如何在获取数据后更新道具

Question

我正在尝试从 fetch 和“'refresh'”页面获取数据，新的属性是它们的值是来自 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));

};

渲染（）{ return（

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

    </View>

我正在尝试以某种方式获取 responseJson 并更新其值 my 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

道具是 read-only，因此您不能直接从接收它们的组件中更新它们。状态是这种变化的机制。听起来您正在从父级获取初始状态，因此您可以通过一些不同的方式来处理它。

一件事是让您的提取发生在父组件中，更新父组件的状态，并将状态值作为 props 向下传递给该组件。这样 props 和 state 之间就没有冲突了。

另一种可能性是只提供状态，如果它是真实的，否则回退到 props。

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() 做更复杂的事情，但你不应该在这里需要.

如何在获取数据后更新道具

How to update props after getting fetch data

fetch

reactjs

react-native

react-props