小编cod*_*mon的帖子

React hooks:如何使用 useState() 更新嵌套对象的状态?

我有一个组件,它接收一个看起来像这样的道具:

const styles = {
    font: {
        size: {
            value: '22',
            unit: 'px'
        },
        weight: 'bold',
        color: '#663300',
        family: 'arial',
        align: 'center'
    }
};
Run Code Online (Sandbox Code Playgroud)

我正在尝试更新该align属性,但是当我尝试更新该对象时,我最终仅用该align属性替换了整个对象。

这就是我更新它的方式:

const { ...styling } = styles;
const [style, setStyle] = useState(styling);

return (
        <RadioButtonGroup
            onChange={(event) => {
                setStyle({ ...style, font: { align: event.target.value } });
                console.log(style);
            }}
        />);
Run Code Online (Sandbox Code Playgroud)

当我 console.logstyle我刚{"font":{"align":"left"}}回来。我希望看到整个对象的更新值align。我是解构的新手,所以我在这里做错了什么?

javascript destructuring reactjs

17
推荐指数
3
解决办法
2万
查看次数

代码覆盖率不工作的玩笑手表

我正在尝试运行,jest --coverage --watch以便只获得我正在为其编写测试的任何组件的覆盖范围,并且当我编写更多测试时,我可以看到覆盖范围的增加。但是,虽然修改后的测试已成功获取并运行,但覆盖率报告却是空的。

----------|----------|----------|----------|----------|-------------------|
File      |  % Stmts | % Branch |  % Funcs |  % Lines | Uncovered Line #s |
----------|----------|----------|----------|----------|-------------------|
All files |        0 |        0 |        0 |        0 |                   |
----------|----------|----------|----------|----------|-------------------|


Test Suites: 2 passed, 2 total
Tests:       2 passed, 2 total
Snapshots:   0 total
Time:        5.599s
Ran all test suites related to changed files.
Run Code Online (Sandbox Code Playgroud)

有关于此的文档几乎为零,但似乎应该按照此 pr 工作: https: //github.com/facebook/jest/pull/5601

javascript testing reactjs jestjs

8
推荐指数
1
解决办法
4888
查看次数

为什么我的 React useState 异步更新我的上下文?

我有一个创建三个单选按钮的组件。选择一个应该更新我在其他地方的上下文存储。

我的状态看起来像这样:

const styles = {
    font: {
        size: {
            value: '22',
            unit: 'px'
        },
        weight: 'bold',
        color: '#663300',
        family: 'arial',
        align: 'center'
    }
};
Run Code Online (Sandbox Code Playgroud)

我这样存储我的状态:

const myContext = useEmailContext();
const { ...styling } = styles;
const [style, setStyle] = useState({ styling });
Run Code Online (Sandbox Code Playgroud)

然后我的组件触发函数onChange

return (
    <RadioButtonGroup
        onChange={(event) => {
            setIsChecked({ checked: event.target.value });
            setStyle({ ...styling,  font: { ...styling.font, align: event.target.value } });
            console.log(style);
            myContext.setStyles(style);
        }}
    />
Run Code Online (Sandbox Code Playgroud)

当我单击按钮时,该函数会触发,但 console.log 显示之前的状态,而不是新更新的状态。同样,我的上下文也落后一步更新。

这里发生了什么?

javascript reactjs

5
推荐指数
1
解决办法
768
查看次数

向无声 &lt;video&gt; 元素添加文本可访问性的正确方法是什么?

我有几个工具提示,可以在悬停时显示动画。起初我们使用 Gif,但我们的团队决定用.mp4文件替换 gif。这些动画显示了如何使用给定选项的示例。他们没有声音。

但现在我无法找到为屏幕阅读器添加辅助功能的正确方法。显然您不能alt在视频元素上使用文本。title并不意味着可访问性。track我知道您应该为标题添加一个元素。但我们不希望这些视频动画上有可见的字幕。我们只需要替代文本来解释有一个动画显示如何使用所选选项的示例。

html video accessibility

5
推荐指数
1
解决办法
2201
查看次数

如何在两个条件下使用 Javascript array.find() ?

我需要检查对象数组中的任何对象是否具有type: aAND 另一个对象是否具有type: b

我最初是这样做的:

const myObjects = objs.filter(attr => attr.type === 'a' || attr.type === 'b');

但代码审查抱怨说,filter当我们只需要知道是否有任何单个对象满足任一条件时,它将继续遍历整个数组。

我想使用array.find(),但这仅适用于单一条件。

无论如何,有没有办法在不使用循环的情况下做到这一点for

javascript arrays

5
推荐指数
1
解决办法
4110
查看次数