如何在 react-hooks 的导出函数中通过 `props` 传递值

Question

如何在 react-hooks 的导出函数中使用 props。我想导出一个函数以在 Profile.js 中提供 onSubmit()。我想从 CompanyDetails 获取 companyName 值并传递给 Profile 并通过 props 在 onSubmit() 中使用。我现在收到 'companyName' 未定义错误。

    import CompanyDetails from "./CompanyDetails";
    
    const Profile = () =>{
    
        const onSubmit = (companyName) =>{
            const profileData = async () => {
                try {   
                  const res = await axios.put('http://localhost:8000/service/company', companyName);
                  if (res.data.success) {
                   
                    // push do the rest of code after save here...
                  }
                  else {
                    console.log(res.data.message);
                    
                  }
                } catch (e) {
                   console.log(e.response.data.message);
                }
              }
             //return () => { profileData() }
             profileData();
        }
        return (
            <div className="profile_wrapper">
                <div className="wrap">
                    <h1>Details:</h1>
                </div>
                <CompanyDetails 
                 onSubmit={onSubmit}
                />
            </div>
        );
    
    }
export default Profile;


export default function CompanyDetails ({onSubmit}) {
    
        const [companyName, setCompanyName] = useState('');
    
        const handleChange = (e) => {
            e.persist();
            const {value} = e.target.value
            setCompanyName(value);
          }
          
      return (
        <div className="container">
            <Select defaultValue={'DEFAULT'} name="company" onChange={e =>handleChange(e)} id="select">
                <option value="DEFAULT" disabled>Choose an option</option>
                <option value="company1">Company 1</option>
                <option value="company2">Company 2</option>
            <Select>
            <Button onClick={onSubmit(companyName)} color="primary">
                Save
            </Button>
        </div> 
      );
    }

Answer 1

好的，所以我终于让它工作了。尽管我不得不基本上从头开始重写所有内容，以尝试捕获所有可能出现的奇怪小错误。但我相信问题的症结在于进行了几次不正确的函数调用。你可以看看变化，看看我在哪里做了不同的事情。

这是一个 Codesandbox 的工作代码。

我不得不模拟发出 axios 请求，但由于模拟 returns 承诺就像 axios 请求一样，您应该能够将其替换为有效的API 在你这边。

如果仍然无法正常工作，请在评论中留下 public API 端点，我将在没有模拟的情况下测试所有内容。

另请注意，有时我在导入 material-ui 组件时遇到错误。但这似乎是 Codesandbox 的问题，而不是组件本身的问题。

Answer 2

在您的 CompanyDetails 您需要一个 onClick 处理程序，例如：

const onClickHandler = () => onSubmit(companyName)

        <Button onClick={onClickHandler} color="primary">Save</Button>

或作为箭头函数传递：

<Button onClick={) => onSubmit(companyName)} color="primary">Save</Button>

配置文件组件中的 onSubmit 函数也存在问题。当你调用 onSubmit 时你 return 另一个函数 return () => { profileData() }，当你应该调用 return profileData() 时。尽管您可以将 onSubmit 函数标记为异步并避免在其中声明其他函数恕我直言。

如何在 react-hooks 的导出函数中通过 `props` 传递值

How to pass value via `props` in export function in react-hooks

reactjs

react-props

react-hooks