Question

我是React的新手，正在解决这个问题。

已在此处阅读了一些教程和问题，以了解有关父子组件应该如何通信的信息。但是，我无法获取数据来填充字段+同时使其可编辑。我将尝试在下面的代码中进一步解释：

父组件：

import { useState } from "react";

export const useInput = initialValue => {
  const [value, setValue] = useState(initialValue);

  return {
    value,
    setValue,
    reset: () => setValue(""),
    bind: {
      value,
      onChange: event => {
        setValue(event.target.value);
      }
    }
  };
};

输入挂钩：（来源：https://rangle.io/blog/simplifying-controlled-inputs-with-hooks/）

import { Input } from 'reactstrap';
import { useInput } from './input-hook';

export default function(props) {

  const { value, setValue, bind, reset } = useInput('');

  return (
    <Fragment>
       <Input type="input" name="name" {...bind} />
    </Fragment>
  );
}

ChildComponent：* （此功能可让我输入输入内容）

import { Input } from 'reactstrap';
import { useInput } from './input-hook';

export default function(props) {

  const { value, setValue, bind, reset } = useInput(props.data && props.data.name || '');

  return (
    <Fragment>
       <Input type="input" name="name" {...bind} />
    </Fragment>
  );

}

ChildComponent组件： （尝试绑定API数据-输入仍可编辑，但即使正确接收也无法填充数据。API数据需要花费一段时间才能接收，因此初始值不确定）

import { Input } from 'reactstrap';
import { useInput } from './input-hook';

export default function(props) {

  const { value, setValue, bind, reset } = useInput(props.data && props.data.name || '');

  useEffect(() => {
     if(props.data) {
       setValue(props.data.name);
     }
  });

 return (
    <Fragment>
       <Input type="input" name="name" {...bind} />
    </Fragment>
  );

}

ChildComponent组件： （尝试使用useEffect绑定数据有效，但是无法键入输入字段。） 我相信这是因为useEffect（）每次输入时都会触发。并且props.data.name重新绑定其原始值

dict(zip(...))

我可以想到一些技巧，例如确保仅绑定一次等等。但是我不确定这是否是正确的方法。有人可以分享一些我可能做错了的见解吗？这样做的正确做法应该是什么。

要进行迭代，我试图将API数据（需要一段时间才能加载）绑定到父级中，并将它们作为道具传递给子级。这些子项都有表单，我希望在这些API数据可用时填充它们，但以后仍可编辑。

谢谢！

Answer 1

我相信，

下面是创建父/子组件结构的基本方法。您不需要基于类的组件即可实现目标。只需在您的useEffect挂钩中添加一个空数组作为第二个参数，它将作为componentDidMount生命周期方法。

父组件：

import React, {useState, useEffect} from 'react';

export default const Parent = () => {
  const [data, setData] = useState({});
  const [input, setInput] = useState({});

  const inputHandler = input => setInput(input);

  useEffect(() => { 
    axios.get('url')
      .then(response => setData(response))
      .catch(error => console.log(error)); 
  }, []);

  return <ChildComponent data={data} input={input} inputHandler={inputHandler} />;

};

子组件：

import React from 'react';

export default const ChildComponent = props => {

  return (
    <div>
      <h1>{props.data.name}</h1>
      <input onChange={(e) => props.inputHandler(e.target.value)} value={props.input} />
    </div>
    );

};

将API数据从React父组件绑定到子组件

1 个答案: