前端笔试之提上结果去就被刷掉了

大家都知道博主最近在着急忙慌的找工作，面试题呢，也看个差不多了，原理性的东西先不说懂不懂，但是是会用的。这就有一个弊端，公司招人的时候是按照造船的技术招的，这就导致一个问题，工作的时候往往忽略了最原始的东西。好了，废话不多说，直接来聊聊今天的面试吧，人事发过来了两道笔试题，我看了看，也会。直接做完提交了，不知道中途忽略了哪个点，导致一半对一半错，大家帮博主审下题，然后欢迎来探讨~~~。

直接上题，一共两道：

1、 将{"a": {"n1": 1, "n2": 3 }, "b": {"n1": 2, "n2": 4}, "c": { "n1": 3,"n2": 5}}）转换成{"n1": {"a": 1, "b": 2, "c": 3 }, "n2": { "a": 3, "b": 4, "c": 5}}

解题思路：看这道题的时候想到了递归，用递归解的时候又想到了闭包，于是乎，打算写一个通用的方法：递归 + 闭包实现。但是现在看起，我的解题思路并不是那么完美，当把条件换成{"a": {"n1": {"k1": 1, "k2": 1}, "n2": {"k1": 2, "k2": 2}}, "b": {"n1": {"k1": 3, "k2": 3}, "n2": {"k1": 3, "k2": 3}}}发现我这个方法并不通用，被展开的还是只有第二层和第三层，虽然面试官给的题目我解了，但是我想要的通用没有解掉，这个问题呢，我还在研究研究。如果只想解面试官给的题，有比这更好的方法。这个题不知道是我想多了，还是原本就是这么简单，我总想到以后会不会再拓展一下呢？

const test = (testdemo) => {
    let i;
    let newobj = {};
    let newobj1 = {};
    
    const abc = (obj) => {
      for (var key in obj){
         if(typeof obj[key] === "object") {
          i = key;
           abc(obj[key]);
         } else {
          newobj[i] = obj[key];
          newobj1[key] = newobj;
      } 
   }
}
    abc(testdemo) ;
}
test({"a": {"n1": 1, "n2": 3 },  "b": {"n1": 2, "n2": 4},  "c": { "n1": 3,"n2": 5}})

2、实现一个FormItem 接收name FormItem可以放一个Input组件，放在FomItem下的Input组件可以不用显示传value/onchange, 同时Input的值会录入到FormItem里面

exp:

调用：

<FormItem name="ceshi">

<Input />

</FormItem>

唉，就是这个题，面试官说我答错了，我百思不得其解，哪里错了，到现在还是不清楚，好了，也不多说，直接上我的解题思路：看到这里我的第一反应是label可以解，直接用了label + for，for可以命中input的id。不知道是不是我想的太简单了，还是怎么的，就是错了，请大家帮忙看下问题所在，欢迎留言和私信。

import React from 'react';

formItem.js 
export default ({name, …resPorps}) => {
  return (
    <div>
      <label for={name}>{name}</label>
     {resPorps}
    </div>
  );
};


demo.js
import React from 'react';
import FormItem from “./formItem.js”

export default ({ name, ...restProp }) => {
  return (
    <FormItem name=”abc”>
      <input id=”input” />
    </FormItem>
  );
}

第二题呢就是会错意了，又重新理解写了一下，凑合着看看正解吧，直接上代码：

useData.js
import { createContext, useContext, useState } from 'react';

const Context = createContext();

const Provider = ({ children }) => {
const [formValues, setFormValues] = useState({});

const handleChange = (name, value) => {
setFormValues((prevValues) => ({
...prevValues,
[name]: value,
}));
};

return (
<Context.Provider value={{ formValues, handleChange }}>
{children}
</ Context.Provider>
);
};
const useValue = (name) => {
const { formValues } = useContext(Context);

return formValues[name];
};

const useChange = (name) => {
const { handleChange } = useContext(Context);

return (event) => handleChange(name, event.target.value);
};

export default { useValue, useChange, Provider };



FormItem.js
import React from 'react';
import { useValue, useChange } from './ useData’;

export default ({ name, children }) => {
const value = useFormItemValue(name);
const onChange = useChange(name);

return (
<div>
{React.cloneElement(children, { value, onChange })}
</div>
);
};

import React from 'react';
import { Provider } from ‘./useData’

export default () => (
<Provider>
<FormItem name="abc">
<input />
</FormItem>
</Provider>
);

上面的题呢，是可以用chart GPT\ 通义千问\豆包来回答，但是AI始终是AI，和它们讨论问题总感觉不如和你们讨论，总觉得差了点什么，你们说呢？

请大家帮忙看看题目，感谢，感谢，感谢~~~~