javascript - ReactJS setState 为空白对象不起作用

标签 javascript reactjs

我有这样的状态

state = {
        params: {}
    }

假设我们通过 this.setState({params:{data:2}}) 设置参数,那么当我们想要恢复到其初始状态时,我们调用 this.setState ({参数:{}})。状态已恢复,但问题是 View 仍然呈现 2(this.state.params.data 的值)。唯一有效的方法是我调用 this.setState({params:{data:''}})。想象一下,如果我们有很多字段,我们就不会这样做。有什么解决办法吗?

codesandbox 的链接是 here

最佳答案

您可以通过对 value 属性使用三元运算符来解决此问题。请参阅工作沙箱:https://codesandbox.io/s/blissful-clarke-l2pif

<Input
   value={params["data"] ? params["data"] : ""}
   onChange={(e, { value }) => {
      this.buildParams("data", value);
   }}
/>

这会起作用,因为它强制语义ui标记有条件地检查我们状态中的值,而不是使用像params.data这样的静态绑定(bind)。如果对象中有 data 属性,那么我们将使用它的值。如果没有,则显示空字符串。

输入使用的值始终受到控制,并且在将 params 恢复为 {} 时不会保留。我假设您可以使用与每个输入对应的特定名称交换数据。

关于javascript - ReactJS setState 为空白对象不起作用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/57722552/

相关文章:

javascript - 为什么我的 for 循环似乎只运行一次?

javascript - Jquery:无法在 iframe 中找到元素

javascript - 计算每个数组项的出现次数并将结果作为对象返回

javascript - 比较对象类型时第三个 = 是必要的吗?

javascript - 在 React 中动态更改列表项

javascript - 属性(property)历史不存在

javascript - 如何在 React Js 中导入文件路径?

javascript -\n 或 <br\> 在 JavaScript 中不起作用

javascript - react、react-native、react-dom、react-test-renderer包的版本冲突

reactjs - 单元测试: react context api with enzyme return an empty object