小编Zer*_*rty的帖子

要限制 useEffect 在第一次渲染时运行，我们可以执行以下操作：

  const isFirstRun = useRef(true);
  useEffect (() => {
    if (isFirstRun.current) {
      isFirstRun.current = false;
      return;
    }

    console.log("Effect was run");
  });

根据这里的例子：https : //stackoverflow.com/a/53351556/3102993

但是如果我的组件有多个 useEffects，每个 useEffects 处理不同的 useState 变化怎么办？我试过isFirstRun.current在另一个 useEffect 中使用逻辑，但由于一个返回，另一个仍然在初始渲染上运行。

一些背景：

const Comp = () => {
const [ amount, setAmount ] = useState(props.Item ? Item.Val : 0);
const [ type, setType ] = useState(props.Item ? Item.Type : "Type1");

useEffect(() => {
    props.OnAmountChange(amount);
}, [amount]);

useEffect(() => {
    props.OnTypeChange(type);
}, [type]);

return { …

我正在查看 NPM 包 csv-parser，它将 csv 文件解析为 JSON。根据提供的示例，您可以通过以下方式逐行读取 csv 文件：

fs.createReadStream('data.csv')
  .pipe(csv())
  .on('data', (rowData) => console.log(rowData))
  .on('end', () => { console.log("done reading the file") });

有什么方法可以只返回 CSV 文件的标头值吗？

我正试图在a上实现这个css规则 td

const boldText = {
    fontWeight: 'bold'
}

<td style={boldText}>Content</td>

但它抛出以下错误:

[ts]
Type '{ style: { fontWeight: string; }; children: string; }' is not assignable to type 'DetailedHTMLProps<TdHTMLAttributes<HTMLTableDataCellElement>, HTMLTableDataCellElement>'.
  Type '{ style: { fontWeight: string; }; children: string; }' is not assignable to type 'TdHTMLAttributes<HTMLTableDataCellElement>'.
    Types of property 'style' are incompatible.
      Type '{ fontWeight: string; }' is not assignable to type 'CSSProperties'.
        Types of property 'fontWeight' are incompatible.
          Type 'string' is not assignable to type '"bold" | "initial" | …

我在 uglifyjs-webpack-plugin 包上发现了一个安全漏洞

  Moderate        Cross-Site Scripting

  Package         serialize-javascript

  Patched in      >=2.1.1

  Dependency of   uglifyjs-webpack-plugin [dev]

  Path            uglifyjs-webpack-plugin > serialize-javascript

  More info       https://npmjs.com/advisories/1426

我来的所有修复都建议升级serialize-javascript到最新版本，但由于我没有直接使用它，我不确定在这里做什么。有任何想法吗？

我正在使用这个版本 "uglifyjs-webpack-plugin": "^2.2.0"

export enum SizeEnum {
    Small,
    Large
}

export interface ICheckbox {
    Size: SizeEnum;
}

const Box = styled.div`
    height: 20px;
    width: 20px;
`

在上面的代码中，我希望能够有条件地更改<Box>基于 prop的高度和宽度值。我该怎么做呢？

我有以下组件：

render() {
    return (
        <textarea onChange={this.handlechange}  value="initial value" />
    )
}

handlechange = (e) => {
    console.log(e.currentTarget.value);
}

以及应该检查更改是否正确触发的相应测试：

const TEST_PROPS = {
    OnChange: jest.fn()
}

it("Fires on change correctly", () => {
    const textArea = enzyme.mount(<TextArea {...TEST_PROPS} />);

    jest.resetAllMocks();

    expect(textArea.find("textarea").simulate("change"));
    expect(TEST_PROPS.OnChange).toHaveBeenCalledTimes(1);
    expect(TEST_PROPS.OnChange).toHaveBeenLastCalledWith(//what should go here?//);
});

target.value一旦 onchange 被触发到toHaveBeenLastCalledWith函数，我想传递 new 的值。我怎样才能做到这一点？

有很多解决方案可以使用 css 隐藏输入微调器。其中之一是：

input::-webkit-inner-spin-button, input::-webkit-outer-spin-button {
    -webkit-appearance: none !important;
    margin: 0 !important;
    -moz-appearance:textfield !important;
}

我想知道如何在样式组件中实现它？谢谢

所以我有一个组件，我有条件地在道具更改时更新状态。如果当前状态的 CurrentPage 不等于下一个道具 CurrentPage，我会使用下一个道具的 CurrentPage 更新状态：

public componentWillReceiveProps(nextProps) {
    if (this.state.CurrentPage !== nextProps.CurrentPage) {
        this.setState({ CurrentPage: nextProps.CurrentPage });
    }
}

我正在重构组件使用钩子。当组件第一次加载时，我为 CurrentPage 设置了一个 useState 钩子：

const [currentPage, setCurrentPage] = useState(props.CurrentPage ? props.CurrentPage : 1);

componentWillReceiveProps在这种情况下，逻辑的钩子等价物是什么？谢谢！

在基于类的组件中，我可以通过执行以下操作轻松访问状态：

const control = shallow(<Test />);
control.state()

对于像下面这样的基于钩子的组件，我如何count从我的测试中访问？

const Test = () => {
    const [count, setCount] = useState(0);

    return (
        <>
            <button onClick={() => setCount(count + 1)}>Count</button>
            <div>{count}</div>
        </>
    )
}

我正在尝试在 Yup 中为逗号分隔的电子邮件地址编写验证模式。

到目前为止，我已经创建了自定义验证函数并将其添加到我的架构中。它将逗号分隔的用户输入推送到一个数组中……我想要做的是使用内置的Yup.string().email().

function invalidEmails(this: Yup.StringSchema, msg: string) {
    return this.test({
        name: "invalidEmails",
        message: msg,
        test: (value) => {
            // push email into emails array
            const emails = value.replace(/\s/g, "").split(",");
            emails.forEach((email: any) => {
                // I want to run the Yup.string().email() validation for each email
            });
        },
    });
}

将自定义函数添加到 addMethod

Yup.addMethod(Yup.string, "invalidEmails", invalidEmails);

最后将它添加到 Yup Schema 中：

<Formik
    initialValues={{
        emails: ""
    }}
    validateOnBlur={true}
    validationSchema={Yup.object().shape({
        emails:
            Yup.string().checkEmails("One or more email is not valid"),
    })}
    render={(formikProps: any) => …