Javascript 跨字符串数组映射以生成“选择”选项（React/Node）

我有两个选择栏：

当我从第一个栏中选择一个选项时，我将其设置为填充此对象，如下所示：

我试图使第二个选择栏中的选项作为所需技能数组的内容填充

因此，在本例中，第二个选择栏中的选项是：提案撰写、麦肯锡7s框架等

我的尝试是：

  const createInputs = () => {
    return values.skills_required.map((skill, idx) => {
      return (
        <div className="input-group">
            <select 
                  value={skill} placeholder="Enter a skill" 
                  onChange={e => updateSkill(e, idx)} 
                  className="form-control">
                  <option>Select an option...</option>
                        {values.category2.needed_skills && values.category2.needed_skills.map((c, i) => (
                          <option 
                                key = {i}
                                value={JSON.stringify(c)}>
                                {JSON.stringify(c)}
                            </option>
                               ))}
               </select>
              <div className="input-group-append">
                  <button 
                        className="btn btn-outline-danger mb-3" 
                        type="button" 
                        id="button-addon2" 
                        onClick={() => removeSkill(idx)}>x
                   </button>
              </div>
        </div>
      );
    });
  };

category2部分是我保存数据的地方。此外，我知道数据实际上在那里，因为当我在选择类别后控制台记录我的values.category2对象时，我得到以下信息：

---

你有没有试过添加一个报税表。i、 e

return  <option key = {i}
                    value={JSON.stringify(c)}>
                    {JSON.stringify(c)}
</option>

您的数据结构与此类似吗？我想说的是，问题可能是数据结构可能循环通过，但什么也得不到

如果您不确定是否可以始终在此处添加console.log：

<option>Select an option...</option>
{ values.category2.needed_skills 
&& values.category2.needed_skills.map((c, i) => {
    console.log("c", c);
    console.log("i", i);
    return ( <option 
                key = {i}
                value={JSON.stringify(c)}>
                {JSON.stringify(c)}
         </option>)
    }
  )
}

最初的返回没有起作用，因为没有花括号

我唯一能想到的另一件事是让数组成为自己的变量。i、 e.让所需技能=价值观。类别2。所需技能

---

我希望这些事情中有一件能有所帮助。

我没有想到这一点，但不幸的是，它返回了一个编译器错误，带有parens和without，我还收到了React for casing对变量的一些无声警告。也许可以尝试使用PascalCase作为您的values变量。谢谢，我在我的帖子的编辑中添加了一个响应。还有一个想法，category2是否会根据您以前的选择进行更改？如果是这种情况，那么您需要将category2更改为[aVariable]，这样它就可以选择与您的选择相关的数据结构的正确部分。很抱歉这里的回复，我还不能对你的问题发表评论，因为我是个笨蛋。

import logo from './logo.svg';
import './App.css';
import { jsxFragment } from '@babel/types';


const values = {
  skills_required: [
    "skill_1",
    "skill_2"
],
  category2: {
    needed_skills: [ "Proposal Writing",  "The McKinsey Framwork", "etc"],
    some_other_stuff: {},
    a_date: "2019-09-30"
  }
}

const updateSkill = (e, idx) => {

  console.log("e: ", e);
  console.log("e: ", idx);
}

const removeSkill = (idx) => {
  console.log("e: ", idx);
}

const createInputs = () => {
  return values.skills_required.map((skill, idx) => {
    return (
      <div className="input-group">
          <select 
                value={skill} placeholder="Enter a skill" 
                onChange={e => updateSkill(e, idx)} 
                className="form-control">
                <option>Select an option...</option>
                      {values.category2.needed_skills && values.category2.needed_skills.map((c, i) => (
                        <option 
                              key = {i}
                              value={JSON.stringify(c)}>
                              {JSON.stringify(c)}
                          </option>
                             ))}
             </select>
            <div className="input-group-append">
                <button 
                      className="btn btn-outline-danger mb-3" 
                      type="button" 
                      id="button-addon2" 
                      onClick={() => removeSkill(idx)}>x
                 </button>
            </div>
      </div>
    );
  });
};


function App() {
  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <p>
          Edit <code>src/App.js</code> and save to reload.
        </p>
        <a
          className="App-link"
          href="https://reactjs.org"
          target="_blank"
          rel="noopener noreferrer"
        >
          Learn React
        </a>

        <jsxFragment>
          { createInputs()}
        </jsxFragment>
      </header>
    </div>
  );
}

export default App;

<option>Select an option...</option>
{ values.category2.needed_skills 
&& values.category2.needed_skills.map((c, i) => {
    console.log("c", c);
    console.log("i", i);
    return ( <option 
                key = {i}
                value={JSON.stringify(c)}>
                {JSON.stringify(c)}
         </option>)
    }
  )
}