跨字符串数组映射以生成“选择”选项（反应/节点）

Question

我有这两个选择栏：

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

我正在尝试使 second 选择栏中的可用选项填充为 needed_skills 数组的内容。

因此在本例中，第二个选择栏中的选项将是：“提案写作”、“麦肯锡 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>
      );
    });
  };

但什么也没有，即使当我 console.log(values.category2.needed_skills) 并获取数组时，我似乎无法映射它并将其作为“选择”下拉列表中的选项返回。

非常感谢任何建议/帮助。

@malfunction 是正确的，当我控制台记录循环的索引和元素时，我什么也得不到。我怎样才能遍历这个字符串数组？我的数据结构是这样的：

const [values, setValues] = useState({
    name: '',
    description: '',
    pitch_price: '',
    categories: [],
    category: '',
    quantity: '',
    applications: '',
    business_name: '',
    skills_required: [''],
    category2: {
      name: "",
      needed_skills: [""]
    },
    photo: '',
    created_by: '',
    loading: false,
    error: '',
    createdProject: '',
    redirectToProfile: false
  });

category2 部分是我保存数据的地方。另外，我知道数据实际上是存在的，因为当我在选择Category 后控制台记录我的values.category2 对象时 - 我得到了这个：

Answer 1

您是否尝试过添加退货。即

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

另外，不确定那里是否需要JSON.stringify。不过应该不会痛。

好吧，不是这样的^^^

在不知道你的数据结构的情况下，我在一个新的 create-react-app 中工作，而没有真正改变你的代码：

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;

你的数据结构和那个类似吗？我会说问题可能出在数据结构上，可能会循环并一无所获。

如果您不确定是否可以随时在此处添加 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>)
    }
  )
}

初始返回不起作用，因为大括号不存在。

我能想到的唯一另一件事是让您的数组成为自己的变量。即let needed_skills = values.category2.needed_skills;

我希望其中一件能有所帮助。