未捕获的错误：当返回常量时，对象作为React子项无效

我不知道为什么即使通过对象映射也会得到此错误。这里是代码：未捕获的错误：当返回常量时，对象作为React子项无效

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> 
    ) 
}

我应该怎么做才能避免这个问题？

来源

2017-09-26 MazMat

目前条件总是满足，所以它没用。也即时不不缺乏（），它可以使用和不使用这种方式 – MazMat

但它的可读性更强。但我尊重你的偏好。认为这个问题可能存在于''{props.dispatch（setId（uuid（），id））}'''尝试检查它是否返回一个对象。如果你想在反应中显示一个对象，请将其串化。我也不同意“总是遇到”条件下没有这样的事情。 –

检查此小提琴，以便您确认。 https://jsfiddle.net/ra3gonro/看看它有和你一样的错误控制台。删除''' {info}'''你会很开心。 –

array.map返回另一个数组。由于您仅在payload.payloadId === rngPayloadId时返回结果，因此某些条目为空。

尝试使用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>

来源

2017-09-26 12:27:16 mersocarlin

用略有不同的措辞获得相同的错误。当我用不同的方式构建组件时，我通过它进行了映射并且工作正常，但我无法在render（）中派发道具，因此我将组件重建为其当前形式，而这次派发道具时，我无法让它们渲染 – MazMat

即使它有效，最终的有效载荷也是一个数组的数组（你也通过payload.drugsId映射）。难道你不认为在渲染之前你必须将这个数组变平？ – mersocarlin

阵营不知道如何使内部{}（see this）对象或数组。当你映射payload.drugsId时，每个id都成为一个对象，所以引用它就像这个<td>{id}</td>将会失败。例如，您可以使用{id[0]}或仅使用<td>{JSON.stringify(id)}<td>在每次迭代中查看映射的结果并根据需要更改您的代码。

来源

2017-09-26 13:44:42 Yoav

好吧，React似乎知道如何呈现它们，因为当我稍微改变代码时，我没有任何问题地渲染数组，但是然后我不能派遣道具。当我删除“{props.dispatch（setId（uuid（），id））}”一切工作正常。当我移动“{props.dispatch（setId（uuid（），id））}”在“payload.drugsId.map（id => {”程序循环和崩溃后，因为我试图设置显示内部的状态 – MazMat

未捕获的错误：当返回常量时，对象作为React子项无效

回答

相关问题