Reactjs 我在哪里调用setState以获取redux值？

我对本机和异步编程非常陌生，并且试图理解如何“同步”redux状态值和本地状态值

例如，我在服务器端存储了一个文本字段“aboutMe”，并使用mapStateToProps将其放置到props中：

   const mapStateToProps = (state) => {
      return { aboutMe: state.aboutMe };
   }

在render中，我使用了一个TextInput，以便用户可以编辑此字段，我希望默认保存在服务器端的内容：

         <TextInput
          onChangeText={(aboutMe) => { 
              this.setState({aboutMe});
          }}
          value={this.state.aboutMe}
        />

这个地方在哪里？我试图使用componentWillReceiveProps，但该生命周期方法未在构造函数上调用，因此我需要设置两次状态（在构造函数和componentWillReceiveProps中）

还有别的办法吗？我觉得这是一个非常普遍的问题，很多react本地开发人员已经解决了这个问题，但我在网上找不到一个普遍接受的方法

谢谢

编辑：

我有很多文本输入，所以我有一个单独的按钮来调用保存变量的操作：

    <Button onPress={()=>{ 
      this.props.saveUserInput(this.state.aboutMe, 
      this.state.name, this.state.address, ....}}>
      <Text> Save changes </Text>
    </Button>

{
this.props.saveUserInput（this.state.aboutMe，
this.state.name，this.state.address，…..}>
保存更改

---

从评论中，我了解到可以在ChangeText上调用save操作……但是来回的流量太大了吗？是否最好将所有变量都保存到本地状态，然后立即调用save for everything？另外，如果用户希望“取消”，该怎么办而不是保存？更改将已保存，我们将无法放弃更改？

由于您已编辑了您的问题，因此您想要实现的目标更加明确，因此我想解决这个问题

您可以在组件中保留受控输入元素的状态，然后使用redux存储来存储持久数据并填充默认值

class Component extends React.Component {
    constructor(props) {
       super(props)
       this.state = {
          aboutMe: props.aboutMe,
          ... // other data
       }
    }

    handleSubmit = (event) => {
      event.preventDefault() // To prevent redirect

      // Dispatch the save user input action
      this.props.dispatch(saveUserInput(this.state))
    }

    render() {
      return (
        <form onSubmit={this.handleSubmit} />
           <TextInput onTextChange={text => this.setState({...this.state, aboutMe: text}) />
           ... // input fields for other data

           // Clicking this fill trigger the submit event for the form
           <button type="submit">Save</button> 
        </form>
      )
    }
  }

类组件扩展React.Component{
建造师（道具）{
超级（道具）
此.state={
aboutMe:props.aboutMe，
…//其他数据
}
}
handleSubmit=（事件）=>{
event.preventDefault（）//防止重定向
//分派保存用户输入操作
this.props.dispatch（saveUserInput（this.state））
}
render（）{
返回(
this.setState（{…this.state，aboutMe:text}）/>
…//其他数据的输入字段
//单击此填充将触发表单的提交事件
拯救
)
}
}

1）如果您的组件是受控组件（您需要其中的状态），并且请求是异步的，那么您必须在

组件WillReceiveProps

中设置状态，如下所示：

class ExampleComp extends Component {
  constructor(props) {
    super(props);
    this.state = {
      aboutMe: ""
    }
  }

  componentWillReceiveProps(nextProps) {
    this.setState({
      aboutMe: nextProps.aboutMe,
    });
  }

  render() {
    return (
      <TextInput
        onChangeText={(aboutMe) => {
          this.setState({aboutMe});
        }}
        value={this.state.aboutMe}
      />
    );
  }
}

---

这样做的缺点是，在请求完成之前，文本输入不会显示。

您不使用setState来修改存储状态，而是应该在Reducer上调度操作并相应地处理操作。您不清楚要实现什么。在我看来，您似乎正在通过操作以及输入字段更改值。因此，您需要在redux存储值更改和输入字段更改时更新它。这是正确的吗？然后你应该问问自己，为什么不一直在redux商店中更改它呢？或者反过来说，在我看来，您可以使用redux存储，而不需要组件状态。OnMount，分派一个操作来检索服务器值，onChange分派存储中的值的更新。对于渲染的值，请使用redux Store中的值控制此值（您保存了我的日期：）

class ExampleComp extends Component {
  constructor(props) {
    super(props);
    this.state = {
      aboutMe: ""
    }
  }

  componentWillReceiveProps(nextProps) {
    this.setState({
      aboutMe: nextProps.aboutMe,
    });
  }

  render() {
    return (
      <TextInput
        onChangeText={(aboutMe) => {
          this.setState({aboutMe});
        }}
        value={this.state.aboutMe}
      />
    );
  }
}

class ParentComp extends Component {

  render() {
    return (
      <div>
        {this.props.aboutMe && <ExampleComp/>}
      </div>
    );
  }
}

class ExampleComp extends Component {
  constructor(props) {
    super(props);
    this.state = {
      aboutMe: props.aboutMe
    }
  }

  render() {
    return (
      <TextInput
        onChangeText={(aboutMe) => {
          this.setState({aboutMe});
        }}
        value={this.state.aboutMe}
      />
    );
  }
}