我如何正确映射一个数组，其中它来自我在 mapStateToProps 中定义的属性之一，用于我的表单中的 select 下拉列表？

Question

以下代码来自我的应用程序组件文件夹中的 NewFighterForm.js 文件：

import React from 'react';
import { updateNewFighterForm } from '../actions/newFighterForm.js';
import { connect } from 'react-redux';
import Button from 'react-bootstrap/esm/Button';

const NewFighterForm = ({ formData, updateNewFighterForm, handleSubmit, editMode }) => {
    
    const {name, alias, nationality, division, stance, height, reach, status, champion, win, loss, draw, ko} = formData

    const handleChange = event => {

        const { name, value } = event.target

        debugger

        
        updateNewFighterForm(name, value)
    }

    return (
            <div>
                <h1>Add Fighter</h1>
                <form onSubmit={event => {
                    event.preventDefault()
                    debugger
                    handleSubmit(formData)
                }}>
                    <ol>
                        <ul>
                        <label>Add Name: </label>
                        <br></br> 
                        <input
                            placeholder="Enter Name"
                            name="name"
                            onChange={handleChange}
                            value={name} 
                        />
                        </ul>
                        <label>Add Alias: </label>
                        <br></br>
                        <ul>
                        <input
                            placeholder="Enter Alias"
                            name="alias"
                            onChange={handleChange}
                            value={alias} 
                        />
                        </ul>
                        <label>Add Nationality: </label>
                        <br></br>
                        <ul>
                        <input
                            placeholder="Enter Nationality"
                            name="nationality"
                            onChange={handleChange}
                            value={nationality} 
                        />
                        </ul>
                        <label>Choose Division: </label>
                        <br></br>
                        <select name="division"
                            value={"" + division}
                            onChange={handleChange}>
                            <option  disabled>Choose the following weight division</option>
                            <option value="Flyweight">Flyweight</option>
                            <option value="Bantamweight">Bantamweight</option>
                            <option value="Featherweight">Featherweight</option>
                            <option value="Lightweight">Lightweight</option>
                            <option value="Welterweight">Welterweight</option>
                            <option value="Middleweight">Middleweight</option>
                            <option value="Light Heavyweight">Light Heavyweight</option>
                            <option value="Cruiserweight">Cruiserweight</option>
                            <option value="Heavyweight">Heavyweight</option>
                        </select>
                        <br></br>
                        <label>Choose Fighter's Stance: </label>
                        <br></br>
                        <select name="stance"
                            value={"" + stance}
                            onChange={handleChange}>
                            <option disabled>Choose the following stance type</option>
                            <option value="Orthodox">Orthodox</option>
                            <option value="Southpaw">Southpaw</option>
                        </select>
                        <br></br>
                        <label>Add Height: </label>
                        <br></br>
                        <input
                            placeholder="Enter Height (i.e 5 ft 5 in)"
                            name="height"
                            onChange={handleChange}
                            value={height}
                        />
                        <br></br>
                        <label>Add Reach: </label>
                        <br></br>
                        <input
                            placeholder="Enter Reach (i.e 68 in)"
                            name="reach"
                            onChange={handleChange}
                            value={reach}
                        />
                        <br></br>
                        <label>Are they still fighting?</label>
                        <br></br>
                        <select name="status"
                            value={"" + status}
                            onChange={handleChange}>
                            <option disabled>Choose whether fighter is still competing</option>
                            <option value="inactive">inactive</option>
                            <option value="active">active</option>
                        </select>
                        <br></br>
                        <label>Check if they ever were a World Champion</label>
                        <input
                            type="checkbox"
                            name="champion"
                            defaultChecked={false}
                            value={champion}
                        />
                        <br></br>
                        <label>W:</label>
                        <input
                            placeholder="Enter number of wins"
                            name="win"
                            type="number"
                            pattern="[0-200]*"
                            inputMode="numeric"
                            onChange={handleChange}
                            value={win}
                        />
                        <br></br>
                        <label>L:</label>
                        <input
                            placeholder="Enter number of losses"
                            name="loss"
                            type="number"
                            pattern="[0-200]*"
                            inputMode="numeric"
                            onChange={handleChange}
                            value={loss}
                        />
                        <br></br>
                        <label>D:</label>
                        <input
                            placeholder="Enter number of draws"
                            name="draw"
                            type="number"
                            pattern="[0-200]*"
                            inputMode="numeric"
                            onChange={handleChange}
                            value={draw}
                        />
                        <br></br>
                        <label>KO:</label>
                        <input
                            placeholder="Enter number of KO"
                            name="ko"
                            type="number"
                            pattern="[0-200]*"
                            inputMode="numeric"
                            onChange={handleChange}
                            value={ko}
                        />
                        <br></br>
                        <label>List for Fighter: </label>
                        <br></br> 
                        <select name="lists"
                            onChange={handleChange}>
                            <option disabled>Choose List for Fighter</option>
                        </select>
                        <br></br>             
                        <Button
                            type="submit"
                            value={ editMode ? "Update Fighter" : "Create Fighter" }
                        >Create Fighter</Button>
                    </ol>
                </form>
            </div>       
    )
}
const mapStateToProps = state => {
    // debugger
    return {
        formData: state.newFighterForm,
        lists: state.myLists

    }
};

export default connect(mapStateToProps, { updateNewFighterForm })(NewFighterForm)

我想在表单底部输入下拉菜单 select，以便用户选择他们想要将战斗机添加到他们的列表中的哪一个。在我放置在 mapStateToProps 中的调试器中，我看到了在“lists: state.myLists”中定义的列表数组。我希望能够正确映射数组并显示 select 选项供用户选择列表。我假设我需要添加“lists”作为为 NewFighterForm 定义的破坏属性之一（让我知道我的理解是否正确） .如果需要更多详细信息，请告诉我，我会相应地更新 post。谢谢大家，非常感谢！

Answer 1

是的，从 props 对象中解构 lists，假设 lists 是一个数组，映射为正常的 JSX。在这里，我假设 lists 数组包含元素对象，这些元素对象具有 value 和 label 属性来显示，这需要进行调整以适合您的实际 lists数组元素形状。

const NewFighterForm = ({
  formData,
  updateNewFighterForm,
  handleSubmit,
  editMode,
  lists, // <-- get lists from props
}) => {
  ...

  return (
    <div>
      <h1>Add Fighter</h1>
      <form
        onSubmit={event => {
          event.preventDefault()
          debugger
          handleSubmit(formData)
        }}
      >
        <ol>
          ...

          <label>List for Fighter: </label>
          <br></br> 
          <select
            name="lists"
            onChange={handleChange}
          >
            <option disabled>Choose List for Fighter</option>
            {lists.map(listItem => ( // <-- map the list
              <option value={listItem.value}> // <-- the option value
                {listItem.label} // <-- what you want displayed
              </option>
            ))}
          </select>

          ...
        </ol>
      </form>
    </div>       
  )
};

const mapStateToProps = state => {
  // debugger
  return {
    formData: state.newFighterForm,
    lists: state.myLists
  }
};

我如何正确映射一个数组，其中它来自我在 mapStateToProps 中定义的属性之一，用于我的表单中的 select 下拉列表？

How do I properly map an array in which it's coming from one of my properties defined in mapStateToProps for a select drop down in my form?

javascript

arrays

reactjs

react-redux

mapstatetoprops