Question

我试图将多个道具传递给功能组件，并将其作为单参数道具进入组件，但由于未定义项，在占位符的InputBox组件中出现错误

export default ({change, state}) => (
  <div style={styles.container}>
    <h3 style={{margin: 0, marginBottom: 15}}>InputData</h3>
    {items.map((item) => (
      <div style={styles.lineContainer}>
        {(() => {
          switch(item.name) {
            case "name1": return <InputBox handleChange ={change} state ={state} item={item}/>
            case "name2": return <SelectBox handleChange ={change} state ={state} item={item}/>;
            case "name3": return <SelectBox handleChange ={change} state ={state} item={item}/>;
            default: return <InputBox/>
          }
        })()}
      </div>
    ))}
  </div>
);


const InputBox = props => 
     <input
        type="text"
        placeholder={props.item.place}
        name={props.item.name}
        value={props.state[props.item.name]}
        onChange={props.change}
        required
        style={{height: 20}}
/>

Answer 1

您的代码存在多个问题。

中，该行是items.map((item)=>....，items并未在任何地方定义。假设：也许您必须将其从状态中解构出来或获取其他道具。
您的组件InputBox需要一些道具，即const InputBox = props =>...中的道具。而且这些道具没有像您在default: return <InputBox/>中那样从case "name1"传递过来。

PS，如果您无意向<InputBox />发送道具，则可以定义默认道具。

Answer 2

正如我所知，之所以会这样，是因为对于switch的默认情况，您返回的<InputBox/>没有任何道具，但是在InputBox组件内部，您试图使用props.item来引用道具。。地点。因此，此错误。

要么确保开关为默认情况返回适当的值，要么将组件配置为调整为道具。

Answer 3

我在默认导出中看不到任何items数组。我认为您忘记了destruct的{{1}}。

在默认导出中使用state代替state.items.map(...)。

我们能否从无状态组件传递多个道具，并将其作为另一个无状态组件中的单个参数进行响应？

3 个答案: