标签: react-hooks

我正在尝试创建一个带有删除按钮的购物清单，但是当我单击它时，其他项目将被删除，并且以前的值仍保留在屏幕上，即使第二次删除也是如此。请假设自定义按钮和图标已经是单独的包这是代码 -

import React, { useState } from 'react';
import { CButton, CDeleteButton } from '@custom/pkg';

const ShoppingList = () => {

    const [state, setState] = useState(
        [{ name: 'Apple', price: 60 }, { name: 'Banana', price: 20 }]
    )

    return (
        <>
            <h2>Product List</h2>
            {state.map(({name, price}, idx) => (
                <>
                    <div key={idx}>
                        <div>{name}</div>
                        <div>{price}</div>
                        <div>
                            <CButton id={idx} onClick={() => {
                                setState((prev) => [...prev.splice(idx, 1)])
                            }}>
                                <CDeleteButton/>
                            </CButton>
                        </div>
                    </div>
                </>
            ))}
        </>
    )
}

export default ShoppingList;

该组件被导入到模态组件中并进行渲染。如果我删除"Apple" …

我正在尝试减少代码和/或优化模块表单中 React 状态挂钩的使用rn-material-ui-textfield。通常，对于单个文本字段，您可以执行以下操作

import { OutlinedTextField } from 'rn-material-ui-textfield'
// ...and all the other imports

const example = () => {
    let [text, onChangeText] = React.useState('');
    let [error, set_error] = React.useState('');

    const verify = () => {
        if(!text) set_error('Enter a text');
        else console.log('Finished');
    }

    return(
        <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
            <OutlinedTextField
                onChangeText={onChangeText}
                value={text}
                onSubmitEditing={verify}
                error={error}
              />
        </View>
    );
}

而且肯定没问题。但是，随着您不断添加越来越多的字段，为每个字段设置单独的error钩子text似乎很乏味，并且会生成大量代码。所以，为了防止这种情况，我尝试以不同的方式编写

// ...all imports from previous snippet

const example = () …

我总是看到这种类型的代码：

const [value, setValue] = useState(null);

既然value可以使用 进行更改setValue，为什么我们要使用constfor value。

我正在制作一个 nextjs 应用程序，并创建了一个自定义 useAxios 挂钩，我希望能够像使用 useState 一样进行类型断言：

const [foo, setFoo] = useState<string>(''); 

但我想传递响应的类型：

const { data, error } = useAxios<CustomResponseType>(URL, true);

我如何在函数中接受这种类型参数？

假设我们有这个：

const [number, set_number] = useState(1);

useEffect(() => {
  // do something
}, [number]);

如果进行一些计算会怎样：

set_number(2 - 1);

这种情况下useEffect会被触发吗？

我正在 useEffect 挂钩中执行提取请求。看起来就是这样。

useEffect(() => {
    // clear prev state
    setUniqueValues([]);
    setLoading(true);

    // get unique values and set field values;
    jwtAxios
        .post(`${baseURL}/support/get_unique_values`, {
            field: fieldName,
            catalog_id: catalogID,
            page,
            category_values: props?.initialValues?.schema?.category,
        })
        .then((data) => {
            setUniqueValues(data.data.unique_values);
            setLoading(false);
            setError(false);
        })
        .catch((err) => {
            console.log(err);
            setError(err);
        });
}, [catalogID, fieldName, page]);

在发布请求中，我想发送一个值（category_values），如果它存在，如果它带有道具。所以我检查一下？

但如果我不将它放入依赖数组中，它会抱怨：

warning  React Hook useEffect has a missing dependency: 'props?.initialValues?.schema?.category'. Either include it or remove the dependency array  react-hooks/exhaustive-deps 

如果我添加它，如 [catalogID, fieldName, page,props?.initialValues?.schema?.category ]

它抱怨如下：

  Line 100:8:   React Hook useEffect has …

我正在使用Amazon 的 React Chime SDK 组件库。组件库有许多组件和钩子可供使用。

其中一个组件是<LocalVideo />. 问题是它开始时视频被禁用。为了打开它，您可以使用 hook useLocalVideo()。

在我看到的示例中，他们使用按钮来执行挂钩：

const MyComponent = () => {
  const togglevideo = { useLocalVideo };

  return(
    <>
      <LocalVideo />
      <button onClick={toggleVideo}>Toggle</button>
    </>
  );
};

这很好用。但是如果我希望 LocalVideo 组件加载启用怎么办？例如，如果我不希望有人必须单击按钮？

我尝试了几种不同的方法，包括：

1. 将代码直接添加到组件中（我认为这不起作用，因为在 LocalVideo 组件渲染完成之前调用了钩子）。
2. 添加里面的代码useEffect（无效的Hook调用错误）。

例如：

const MyComponent = () => {
  useEffect( () => {
    useLocalVideo();
   },
  );

const MyComponent = () => {
  const { tileId, isVideoEnabled, setIsVideoEnabled, toggleVideo } = useLocalVideo();

  useEffect( () => …

\xc2\xa0 我正在为我的应用程序使用codesandbox.io，它返回错误TypeError : (0, _react.default ) 不是函数。这个主要App.js代码工作正常，直到我尝试从 React 导入useState，如下所示。

// The error reference appears on the line that is defined by the isOpen variable and the openSidebar function\n\nimport useState, {React} from "react";\nexport default function App () {\n  const [isOpen, openSidebar] = useState (false);\n  return (\n

\xc2\xa0 isOpen且openSidebar用于

    <Sidebar\n      sidebar = {\n            <>\n              <h1> Sidebar content </h1> \n              <h1> Sidebar content </h1> \n              <h1> Sidebar content </h1> \n              <h1> Sidebar …

我不想使用单个状态变量或使用功能组件更新整个状态。我编写了一个基于 useReducer 的钩子，如下所示，但我不确定可能的危险影响。安全吗？谢谢。

import React, { useReducer } from "react";

export function useCustomState<T>(initialState: T) {
    const reducer: React.Reducer<T, Partial<T>> = (prevState, newState) => ({
        ...prevState,
        ...newState,
    });

    return useReducer(reducer, initialState, (state) => state);
}

我正在尝试使用组件方法来访问createRef()，但是我收到了TypeError: modalRef.current is null错误。

我以前从未使用过参考文献，因此如果它错误，则会指导如何实现我想要做的事情。

这是我的尝试

const parent = () => {
  const modalRef = createRef();
  const onBtnClick = () => {
   modalRef.current.upadeState();
  }
  return(
  <div>
   <button onclick={onBtnClick}>bro</button>
    <Modal ref={modalRef} />
  </div>
 )
}

莫代尔

export default Modal = () => {
  const upadeState = () => {
   console.log('It works fam');
   }
  return(
  <div>
    bro we here
  </div>
 )
}