Question

好吧，我试图弄清楚如何在useEffect挂钩中使用数组。基本上，我想知道如何将索引作为参数传递，因此不必手动获取索引。

我正在从后端获取一些数据，以便编辑某些表单字段。我遇到麻烦的字段是可以动态创建的字段。可能只有1或100。

这是组件：

    // HERE IS WHERE I AM ATTEMPTING TO DO WHAT I NEED
    useEffect(() => {

    // So there is only one name key.
    // I need that to be dynamic. To accept as many name keys as possible.
    startupFourthStepFormActionHandler({
      products_or_services:
        [
          {
            name:
              startupProductsOrServicesInfo.productsorservices &&
              startupProductsOrServicesInfo.productsorservices[0].name,
          },
        ] || [],
    });
  }, []);


  return (
    <div>
      {productsOrServicesInputs.map((input, index) => (
        <div key={input}>
          // THESE ARE DYNAMIC INPUTS. SO THERE COULD 1 OR 100
          <FormField
            value={startupFourthStepForm.products_or_services[index].name}
          />
          // LET'S SAY THIS WAS CREATED DYNAMICALLY
          <FormField
            value={startupFourthStepForm.products_or_services[index].name}
          />
        </div>
      ))}
    </div>
  );
};

如果您看到上面的组件，则在useEffect上，我正在这样做：

  return startupFourthStepFormActionHandler({
      products_or_services:
        [
          {
            name:
              startupProductsOrServicesInfo.productsorservices &&
              startupProductsOrServicesInfo.productsorservices[0].name,
          },
        ] || [],
    });

我想将其转换为：

  return startupFourthStepFormActionHandler({
      products_or_services:
        [
          {
            name:
              startupProductsOrServicesInfo.productsorservices &&
              startupProductsOrServicesInfo.productsorservices[INDEX].name,
          },
        ] || [],
    });

或者某种允许我拥有所需数量的name键的功能。喜欢：

  return startupFourthStepFormActionHandler({
      products_or_services:
        [Here I should grab an array of 100 hundred objects with key called name] || [],
    });

所以我可以做类似的事情： startupProductsOrServicesInfo.productsorservices[index].name

如您所见，我有这个startupProductsOrServicesInfo.productsorservices[0].name，但我需要它是数组中该项的proepr索引。现在，它只获取索引0，我需要动态获取该索引。

在组件上的useEffect方法中，您可能会看到此信息 startupProductsOrServicesInfo.productsorservices，它是一个API调用，并返回此->

{
  "success": true,
  "productsorservices": [
    {
      "name": "Software",
    },
    {
      "name": "Hardware",
    }
  ]
}

所以我要做的就是在此value->

上设置来自后端的值

value={startupFourthStepForm.products_or_services[index].name}，您可能在组件<FormField />中。

我需要在useEffect钩中执行此操作。

我想念什么？

TL; DR

因为没有任何组件在执行我需要的操作，但是它只获取数组的第一个索引startupProductsOrServicesInfo.productsorservices[0].name，因此我需要动态地获取它。

Answer 1

根本上，useEffect钩子只是控制某些代码的时间的一种方法。否则它们根本就不是特别的，因此要解决您的问题，您只需要常规的旧React解决方案即可。

如果要将索引传递到组件中，只需使用props：

const YourComponent = props => {

    // HERE IS WHERE I AM ATTEMPTING TO DO WHAT I NEED
    useEffect(() => {

    // ..
      startupProductsOrServicesInfo.productsorservices[props.index].name,
    // ..
}

然后传入父组件中的索引：

return <YourComponent index={1} />

如果您希望组件记住索引，则必须使用状态：

const YourComponent = () => {
    const [index, setIndex] = useState(0);
    // HERE IS WHERE I AM ATTEMPTING TO DO WHAT I NEED
    useEffect(() => {

    // ..

          startupProductsOrServicesInfo.productsorservices[index].name,

如果您希望某个事件更改该索引，例如，如果您希望组件中的按钮将其递增，则可以使用setIndex返回的useState函数：

const YourComponent = () => {
    const [index, setIndex] = useState(0);
    // HERE IS WHERE I AM ATTEMPTING TO DO WHAT I NEED
    useEffect(() => {

    // ..

          startupProductsOrServicesInfo.productsorservices[index].name,

    });
    const incrementIndex = () => setIndex(index + 1);
    return <button onClick={incrementIndex}>Click Me!</button>;

如何将index作为参数添加到useEffect挂钩？

1 个答案: