Question

我是Redux / React的新手，在使用状态对象时遇到了问题。

我已经在下面的index.js中初始化了我的状态，但是我收到了这个错误

Uncaught Invariant Violation: Objects are not valid as a React child (found: object with keys {text}). 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 ShowTweetComponent.

index.js

const initialState = {
  text: 'test successful'
} 

let store = createStore( 
  twitterApp,       
  initialState,     
  applyMiddleware(  
    thunkMiddleware 
  )
) 

console.log('1 - index.js loaded')

render( 
    <Provider store={store}>
      <App />
    </Provider>,
    document.getElementById('LoadApp')
)

这是我的行动

function getTweetData(json) {
  return {
    type: REQUEST_TWEETS,
    tweet: json.status_text,
    receivedAt: Date.now().toString()
  }
}

function fetchTweets() {

  return dispatch => {
    return fetch(`/api/twitter`)
      .then(response => response.json())
      .then(json => dispatch(getTweetData(json)))
  }


}

export function fetchTweetsIfNeeded() {
  return (dispatch, getState) => {
    return dispatch(fetchTweets())
  }
}

这是我的减速机

const displayData = (state = [], action) => {

  switch (action.type) {

    case REQUEST_TWEETS:
      return [
        ...state,
        {
          text: action.tweet
        }
      ]

    default:
      return state
  }
}

如果您需要任何额外信息，请告诉我们。我只能在使用exampleState = 'this is my message!'

时才能使用它

更新：这里是repo（请参阅客户端文件夹中的反应内容）https://github.com/jaegerbombb/twitter-api-test

Answer 1

您正在使用您的redux状态覆盖this.props.children（在twitterContainer.js中）。我不确定这是不是一个好主意。 React期望children为node，但它正在获取一个数组（来自你的twitterApp reducer）。

对于您的代码，您只需将children密钥更改为twitterContainer.js和twitterComponent.js

中的其他名称即可

在Redux中使用状态对象（基本）

1 个答案: