React - 在創建JSX組件陣列時，對象無效作爲React子項

我將舊項目React.createComponent中的項目轉換爲新的ES6類定義。我有以下部件：React - 在創建JSX組件陣列時，對象無效作爲React子項

class AnswerFrame extends React.Component { 
    constructor(props) { 
     super(props); 
    } 
    render() { 
     var props = this.props; 
     var selectedNumbers = props.selectedNumbers.map(function (i) { 
      return (
       <span onClick={props.unselectNumber.bind(null, i)}> 
        {i} 
       </span> 
      ) 
     }); 

     return (
      <div id="answer-frame"> 
       <div className="well"> 
        {selectedNumbers} 
       </div> 
      </div> 
     ); 
    } 
};

的想法是定義一個數組，selectedNumbers這是跨距，每個具有一個onclick事件的陣列。這些然後被渲染。

此代碼工作正常轉換爲ES6之前，但現在是給我下面的錯誤：

Error: Objects are not valid as a React child 
(found: object with keys {dispatchConfig, _targetInst, nativeEvent, type, target, currentTarget, eventPhase, bubbles, cancelable, timeStamp, defaultPrevented, isTrusted, view, detail, screenX, screenY, clientX, clientY, ctrlKey, shiftKey, altKey, metaKey, getModifierState, button, buttons, relatedTarget, pageX, pageY, isDefaultPrevented, isPropagationStopped, _dispatchListeners, _dispatchInstances}). 
If you meant to render a collection of children, use an array instead or wrap the object using createFragment(object) from the React add-ons. Check the render method of `AnswerFrame`.

這是爲什麼不工作了？

來源

2017-04-26 Alex Logan

什麼該數組包含，其數組''數組' r/string'還是'object'數組？你能顯示'console.log（this.props.selectedNumbers）'的結果嗎？ –

我覺得這個消息是關於'this.props.selectedNumbers'的內容。你確定有數字嗎？ –

也許缺少span元素中的'key'屬性會導致這個問題？ –

是的，原來問題出在props.selectedNumbers。試圖找出在使用ES6時綁定this的方式中的更改，我從代碼中其他位置的綁定中刪除了空值。

此：

numbers.push(
    <div className={className} onClick={selectNumber.bind(i)}> 
     {i} 
    </div> 
);

應該已經

numbers.push(
    <div className={className} onClick={selectNumber.bind(null,i)}> 
     {i} 
    </div> 
);

所以props.selectedNumbers是導致問題的對象。

來源

2017-04-26 15:46:05

綁定在反應道具是不好的做法（https://daveceddia.com/avoid-bind-when-passing-props/），考慮做selectNumber高階函數：

const selectNumber = (i) =>() => { 
    // your original function code here 
    doWhateverWith(i); 
}

和設置的onClick到：

來源

2017-04-26 15:56:58

使用這種方法，你將如何在不同的類中重用該函數？目前，我在父組件中定義了'selectNumber'並將其傳遞給子組件。 –

@AlexLogan要在一個動作中選擇Number，你可以在你的子函數中像這樣調用它：'selectNumber（i）（）'或者將它傳遞給'（i）=> selectNumber（i）（）' –

雖然定義了selectNumber，但是在這種情況下，將'clickHandler'函數定義爲'（i）=>（）=> selectNumber（i）'並執行'onClick = {clickHandler（i）} ' –

我知道，這只是另一種方式做同樣的事情，但...

members.push(
    <div className={className} onClick={() => {selectedNumber(i);}}> 
     {i} 
    </div> 
);

來源

2017-04-26 16:09:20

React - 在創建JSX組件陣列時，對象無效作爲React子項

回答

相關問題