キャッチされていないエラー：オブジェクトがconstを返すときにリアクションの子として有効でない

Question

オブジェクトを介してのマッピング以降にこのエラーが発生する理由がわかりません。コードは次のとおりです。

const Leki = (props) => { 
     const fakePayload = props.fakePayload; 
     const drugs = props.drugs; 

     const rngPayloadId = Math.floor(Math.random() * 4); 

     const payload = fakePayload.map(payload => { 
      if (payload.payloadId === rngPayloadId) { 

       return payload.drugsId.map(id => { 
        return <tr> 
         {props.dispatch(setId(uuid(), id))} 
        <td>{id}</td> 
        <td>{drugs[id].name}</td> 
        <td><input value={undefined} type="number" name="price" /></td> 
       </tr> 
      }) 
     } 
    }) 
    return(
     <tbody>{payload}</tbody> 
    ) 
} 

この問題を回避するにはどうすればよいですか？

Answer 1

array.mapは別の配列を返します。 payload.payloadId === rngPayloadIdの場合にのみ結果を返すので、​​のエントリの一部はnullです。

代わりにfakePayload.filterを使用してください。

私はあなたがそれをチェックアウトできるように例を挙げました。

const Leki = ({ fakePayload = [], drugs = [] }) => { 
 
    const rngPayloadId = Math.floor(Math.random() * 4) 
 
    
 
    const payload = fakePayload 
 
    .filter(payload => payload.payloadId === rngPayloadId) 
 
    .map(payload => 
 
     payload.drugsId.map(id => 
 
     <tr key={id}> 
 
      <td>Id: {id}</td> 
 
      <td>{drugs[id].name}</td> 
 
     </tr> 
 
    ) 
 
    ) 
 
    
 
    return <tbody>{payload}</tbody> 
 
} 
 

 
const fakePayload = [{ 
 
    payloadId: 0, 
 
    drugsId: [1, 2], 
 
}, { 
 
    payloadId: 1, 
 
    drugsId: [3, 4], 
 
}, { 
 
    payloadId: 2, 
 
    drugsId: [5, 6], 
 
}, { 
 
    payloadId: 3, 
 
    drugsId: [7, 8], 
 
}] 
 
    
 
const drugs = { 
 
    1: { name: 'Drug 1' }, 
 
    2: { name: 'Drug 2' }, 
 
    3: { name: 'Drug 3' }, 
 
    4: { name: 'Drug 4' }, 
 
    5: { name: 'Drug 5' }, 
 
    6: { name: 'Drug 6' }, 
 
    7: { name: 'Drug 7' }, 
 
    8: { name: 'Drug 8' }, 
 
} 
 
    
 
class App extends React.Component { 
 
    render() { 
 
    return (
 
     <table> 
 
     <Leki fakePayload={fakePayload} drugs={drugs} /> 
 
     </table> 
 
    ) 
 
    } 
 
} 
 

 
ReactDOM.render(
 
    <App />, 
 
    document.getElementById('root') 
 
)

table tr td { 
 
    border: 1px solid red; 
 
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script> 
 

 
<div id="root"></div>

Answer 2

{}（see this）内のオブジェクトや配列をレンダリングする方法を知りません反応します。 payload.drugsIdをマッピングするときには、それぞれidがオブジェクトになります。このように参照すると、<td>{id}</td>は失敗します。たとえば、{id[0]}を使用するか、<td>{JSON.stringify(id)}<td>を使用して、各繰り返しでマップの結果を確認し、必要に応じてコードを変更することができます。