标签: setstate

我正在使用此问题中的方法来更改颤振中 Scaffold 的主体：

Flutter Drawer Widget - 更改 Scaffold.body 内容

所描述的方法非常有效。现在我只想在用户点击其中一个项目后自动关闭抽屉。

我尝试使用 Navigator.pop() 方法，但它会弹出整个屏幕，而不仅仅是抽屉。它让我看到一个全黑的屏幕。

有什么建议？

概述：

• 之前用 Enzyme 测试我重构过脚本测试，现在想用@testing-library/react

问题：

• 我在@testing-library/react 中找不到 setState 的解决方案

如果你执行了一个异步操作来更新状态componentWillMount(比如说文档),但在异步调用完成之前卸载了组件(用户导航),你最终会尝试异步回调试图在现在卸载的组件,和

"不变违规:replaceState(...):只能更新已安装或安装的组件."

错误.

最好的方法是什么？

谢谢.

我有这样的组件结构

<A>
    <B>
        <C/>
        <C/>
    </B>
    <D>
       <E/>
       <E/>
    </D>
</A>

想法是对块E中的组件的操作由组件A的功能处理为A的状态,而不是作为道具传递给B和C. 我知道,更好的方法是使用Flux,pubsub-js或其他Store-message系统,但希望如果有人可以解释为什么正确到我理解的解决方案不起作用.

从组件E的多个实例中单独调用组件A的此函数会导致竞争条件,只有一个状态更改(而不是每个函数调用提供更改)

updateState(value,index){
   this.setState(update(this.state, {
        a: {
          [index]: {
            b: {
             $set: value
            }
          }
        }
    })
);
}

功能更新来自

import update from 'react/lib/update';

反对ReactJS的错误解决方案推荐的做法,但效果很好:

updateState(value,index){
   this.state.a[index].b=value;
   this.forceUpdate();
);
}

我的问题是:

这是一个错误,多个simalteneous setState调用竞争条件,或者我做错了什么而没有修改它？

我是React-redux应用程序开发的新手,我试图了解如何在页面加载后立即发送另一个操作.以下是我的容器代码.我正在使用这个(https://github.com/jpsierens/webpack-react-redux)样板.

let locationSearch;

const ActivationPage = ({activateUser}) => {
    return (
        <div className="container">
          <h2>Activation Required</h2>
          <p>An Activation Email was sent to your email address. Please check your inbox to find the activation link</p>
          { activateUser() }
        </div>
    );
};


ActivationPage.propTypes = {
    activateUser: PropTypes.func
};


const mapStateToProps = (state) => {
    return {
        message: state.message,
        currentUser: state.currentUser,
        request: state.request
    };
};

const mapDispatchToProps = (dispatch) => {
    return {
        activateUser: () => {
            console.log(location);
            if (location.search !== '') …

好的,所以我很沮丧找到合适的解决方案,所以我在这里发布问题.给出答案对我有很大的帮助,因为我被困住了!

状态树看起来像这样

this.state = {
      itemList : [{
                    _id : 1234,
                   description : 'This the description',
                   amount : 100
                    }, {
                    _id : 1234,
                   description : 'This the description',
                   amount : 100
                    }],
     }

问题是:

1. 无法根据_id更新数组的Object中的任何特定键
2. 以前的状态应该保持不变

 class App extends Component {
  constructor() {
    super();
    this.state = {
      name: 'React'
    };
    this.setState=this.setState.bind(this)
  }

  render() {
    return (
      <div>
        <Hello name={this.state.name} />
        <p>
          Start editing to see some magic happen :)
        </p>
        <Child {...this}/>
      </div>
    );
  }
}

child Component
var Child=(self)=>{
  return(
    <button  onClick={()=>{
      self .setState({
        name:"viswa"
      })
    }}>Click </button>
  )

在这里我绑定 setState 函数并将其作为道具发送到子组件。这将改变父组件的状态。这是正确的方法吗？

假设我有以下代码：（太冗长了）

function usePolicyFormRequirements(policy) {
  const [addresses, setAddresses] = React.useState([]);
  const [pools, setPools] = React.useState([]);
  const [schedules, setSchedules] = React.useState([]);
  const [services, setServices] = React.useState([]);
  const [tunnels, setTunnels] = React.useState([]);
  const [zones, setZones] = React.useState([]);
  const [groups, setGroups] = React.useState([]);
  const [advancedServices, setAdvancedServices] = React.useState([]);
  const [profiles, setProfiles] = React.useState([]);

  React.useEffect(() => {
    policiesService
      .getPolicyFormRequirements(policy)
      .then(
        ({
          addresses,
          pools,
          schedules,
          services,
          tunnels,
          zones,
          groups,
          advancedServices,
          profiles,
        }) => {
          setAddresses(addresses);
          setPools(pools);
          setSchedules(schedules);
          setServices(services);
          setTunnels(tunnels);
          setZones(zones);
          setGroups(groups);
          setAdvancedServices(advancedServices);
          setProfiles(profiles);
        }
      );
  }, …

我正在使用 antd 通知组件，如下所示

        import { notification } from "antd";

        const Notification = ({ msg, type, clearMsg }) => {
          return (
            <div>
              {notification[type]({
                description: msg,
              })}
              {clearMsg()}
            </div>
          );
        };

        export default Notification;

我只是在需要弹出通知的任何地方使用它。例如API响应失败后：

          const onSubmit = async (e) => {
            try {
              const res = await login(data);
              if (res.message) {
                setError({ state: true, msg: res.message });
              }
            } catch (err) {
              console.log(err);
            }
          };

然后根据错误状态，我在返回正文中显示通知，如下所示：

          { error.state ?
            <Notification 
               type="error" 
               msg="some msg" 
               clearMsg={() => setError({state: false, msg: ""})} : …

如果我们用相同的值设置状态组件将不会重新渲染，但当我在函数体中设置状态时它不适用。

例如，如果我在按钮单击和单击按钮上设置相同的状态，则组件不会在按钮单击时重新渲染

function Test1() {
  const [name, setName] = useState("Shiva");
  const onButtonClick = () => {
    console.log("Clicked");
    setName("Shiva");
  };
  console.log("Redering");
  return (
    <div>
      <span>My name is {name}</span>
      <button onClick={onButtonClick}>Click Me</button>
    </div>
  );
}

But, when I set the same state before the return statement React goes infinite renderings

function Test2() {
  const [name, setName] = useState("Shiva");
  // ... come stuff
  setName("Shiva");
  console.log("Rendering");
  return (
    <div>
      <span>My name is {name}</span>
    </div>
  );
}

What actually happening internally?