我們能否從無狀態組件傳遞多個道具，並將其作為另一個無狀態組件中的單個參數進行響應？

Question

我試圖將多個道具傳遞給功能組件，並將該組件作為單參數道具進入，但是由於未定義項，在占位符的Inp​​utBox組件中出現錯誤

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

您的代碼有多個問題。

1. 在您的第一個組件中，該行是items.map((item)=>.... ， items並沒有在任何地方定義假設：也許您必須將其從狀態中items.map((item)=>....或獲取另一個道具。

2. 您的組件InputBox需要一些道具，即const InputBox = props =>... 而且這些道具不是default: return <InputBox/>傳遞的default: return <InputBox/> ，就像在case "name1"一樣。

PS，如果您不打算將道具發送到<InputBox /> ，則可以定義默認道具。

Answer 2

可以看出來，這是因為在switch的默認情況下，您返回的<InputBox/>沒有任何道具，但是在InputBox組件內部，您試圖使用props.item.place引用道具。 因此，此錯誤。

確保開關為默認情況返回適當的值，或者將組件配置為調整為道具。

Answer 3

我沒有在默認導出中看到任何items數組。 我認為您忘記了將其從您的state destruct 。

在默認導出中使用state.items.map(...)而不是items.map(...) 。