Question

在安装后如何更新状态，或在反应中从一页移动到另一页时如何传递状态。

在“我的场景”中，通过单击按钮Add New，它将定向到AddNew页面，因为单击save将重定向到显示页面，该显示页面有效。当我移到添加新页面时在“显示多项选择保持不变”（始终为en）中，如何在重定向后获取渲染状态

class Display extends React.PureComponent{
  constructor(props) {
    super(props);
}
componentWillMount() {
    console.log(this.state.language);
    const defLanguage = this.props.loginData.language; // "en"
    this.setState({ language: defLanguage.split(",") }, () =>
      this.callQueryApiForFetch("ONLOAD")
    );
  }
render(){
               <MultiSelect
                      filterOptions={formatLanguageArray(
                        languageConfig.pvalues
                      )}
                      setSelectedFieldValues={value => {
                        this.setState({ language: value }, () => {
                          this.callQueryApiForFetch("ONLOAD");
                        });
                      }}
                      id="language"
                      itemsSelected={this.state.language}
                      label="Select Language"
                    />

         <button className="page-header-btn icon_btn display-inline">
            <img
              title="edit"
              className="tableImage"
              src={`${process.env.PUBLIC_URL}/assets/icons/ic_addstore.svg`}
            />
            {`Add New`}
          </button>

}

}


class AddNew extends React.Component {

  constructor(props) {
    super(props);

  }
componentWillReceiveProps = () => {
     const defLanguage = this.props.location.state.language;
      this.setState({ language: defLanguage }); 
}
 render(){

           <Link
          to={{
            pathname: "/ui/product-info",
            state: {
              language: this.state.language
            }
          }}
          className="btn btn-themes btn-rounded btn-sec link-sec-btn"
        >
          Save
        </Link>
}

Answer 1

React中的一个好习惯是将状态管理与组件渲染逻辑分开。这个想法是将集中状态的片段从上到下传递到组件层次结构，并允许它们在其render方法中使用这些数据。通过这种方法，您可以避免将应用程序状态保留在组件内。

每当组件需要更改应用程序状态时，它都会调度一条消息，该消息由称为“ reducer”的功能处理，并更新存储中的状态。整个概念的基础是整个应用程序具有单一的事实来源，并防止组件直接操纵商店。

实现此目标的标准方法是使用称为Redux的设计模式，该模式可通过react-redux库提供给React应用。

我建议您看一下this教程，以了解如何在实践中使用React Redux库。

Answer 2

由于您提到要重定向到下一页，因此您也可以尝试this.props.history.push("/report")，在这里“ / report”是您要重定向到的链接。您可以检查React-Routing Concept（只是一个建议）

用于将道具从父组件发送到子组件您的情况：

  componentWillReceiveProps(nextProps){
      if(nextProps.someValue!==this.props.someValue){
        //Perform some operation
        this.setState({someState: someValue });
        this.classMethod();
      }
    }

Answer 3

1。将显示设置为组件而不是PureComponent。

2。在Display中定义本地状态

// default state..
state = {
 language: 'us',
}

3.console，是否在Display的道具中使用语言（将会安装）。

//可能在

this.props.location.state

4。然后设置状态

this.setState(prevState => ({
 ...prevState,
 language: --value--,
})

如何在reactjs中安装时更新状态

3 个答案: