Question

我具有useState和useRef的主要组件以及局部状态，还有另一个自定义钩子，在自定义钩子中，我想重置主要组件的状态和ref，我在下面是否能正确执行？

awslocal dynamodb create-table \
  --debug \
  --table-name Journal \
  --global-secondary-indexes "[{\"IndexName\": \"GetJournalRowsIndex\", \"KeySchema\": [{\"AttributeName\": \"persistence-id\", \"KeyType\": \"HASH\"}, {\"AttributeName\": \"sequence-nr\", \"KeyType\": \"RANGE\"}], \"Projection\": {\"ProjectionType\": \"ALL\"}, \"ProvisionedThroughput\": {\"ReadCapacityUnits\": 1, \"WriteCapacityUnits\": 1}}, {\"IndexName\": \"TagsIndex\", \"KeySchema\": [{\"AttributeName\": \"tags\", \"KeyType\": \"HASH\"}], \"Projection\": {\"ProjectionType\": \"ALL\"}, \"ProvisionedThroughput\": {\"ReadCapacityUnits\": 1, \"WriteCapacityUnits\": 1}}]" \
  --key-schema \
      AttributeName=pkey,KeyType=HASH \
      AttributeName=skey,KeyType=RANGE \
  --attribute-definitions \
      AttributeName=persistence-id,AttributeType=S \
      AttributeName=pkey,AttributeType=S \
      AttributeName=skey,AttributeType=S \
      AttributeName=sequence-nr,AttributeType=N \
      AttributeName=tags,AttributeType=S \
  --billing-mode PAY_PER_REQUEST

我是否像通过传递所有外部状态值和setState方法一样正确使用自定义钩子？另外，我发现即使在我的customHook中不使用// custom hook const useLoadData = ({startLoad, setStartLoad, setLoadCompleted, setUserNameRef}) => { useEffect(() => { const fetchUser = async() => { await fetchFromApi(...); return userName;}; if (startLoad) { const newUserName = fetchUser(); setStartLoad(false); setLoadCompleted(true); setUserNameRef(newUserName); } }, [startLoad]); } // main component const myMainComp = () { const [startLoad, setStartLoad] = useState(false); const [loadCompleted, setLoadCompleted] = useState(false); const userNameRef = useRef(""); const setUserNameRef = (username) => { this.userNameRef.current = username; } useLoadData(startLoad, setStartLoad, setLoadCompleted, setUserNameRef); refreshPage = (userId) => { setStartLoad(true); } }，它也可以按预期工作，所以我是否需要在自定义钩子中使用useEffect？欢迎任何评论和建议！

Answer 1

首先，我认为在自定义钩子中使用组件方法（例如useState提供的“ set”方法）不是一种好方法。您正在将挂钩与主要组件的内部逻辑绑定在一起。如果自定义挂钩的目的是从API提取数据，则它需要向主组件提供var，这些var能够使主组件自行操作其状态（例如return isFetching，error，{ {1}}等，请勿在hook内调用任何主要组件data方法。

React Hook-useCustomHook设置外部useState和useRef

1 个答案: