

componenntでglobal stateを使って表示しているですが、画面上にそのinputの値が変えられない。  
値を変えるために新しいactionを発行してinputのonChangeとbindすると変更できるようになりましたが、  
これではinputごとに新しいactionを作らないといけないことになるのでこういうやり方では違う気がします。

以下はcomponent PlayerData.jsのコードです。

[code]

    const PlayerData = props => {
        const { playerData, fetchPlayerData } = props//ここでreducerからstateを取る
        //const [playerAp, setPlayerAp] = React.useState(0)//ローカルで管理したい
        ...
        const handleSearchButton = React.useCallback(() => {
            fetchPlayerData(playerId) //検索ボタンを押して検索してglobal stateであるplayerDataを更新する 
            //setPlayerAp(playerData.ap) //ここでlocal stateに保存したいですが、この時点ではplayerDataはまだnullです
        })
        ...
    ​
        const renderPlayerData = () => {
            ...
            <TableCell>{playerData.name}</TableCell>
            <TableCell>
                <Input 
    　　　　　　　　　value={playerData.ap} //global stateの値を表示、これを画面上に変更できるようにしたい
                   //value={playerAp}//最終的にこうなりたいです
    　　　　　　　　　name="ap"className={classes.ap_input} 
    　　　　　　　　　id="input_playerap" />
                <Button variant="outlined" className={classes.button} onClick={handleApSetButton}>
                    Set AP
                </Button>
            </TableCell>
            ...
        }
    
        return (
        <>
          ...
          <div>
            <FormControl className={classes.input}>
              <InputLabel htmlFor="input_playerid">プレイヤーID</InputLabel>
              <Input
                value={playerId}
                onChange={handlePlayerIdChanged}
                id="input_playerid"
              />
            </FormControl>
            <Button
              variant="outlined"
              className={classes.button}
              onClick={handleSearchButton}
            >
              検索
            </Button>
          </div>
          {renderPlayerData()}
        </>
      )
    }
    ​
    PlayerData.propTypes = {
      playerData: PropTypes.object,
      fetchPlayerData: PropTypes.func
    }
    
    
[/code]

action Player.jsのコード

[code]

    export async function fetchPlayerData(dispatch, playerId) {
    
        dispatch({
            type: FETCH_PLAYER_DATA_LOADING 
        })
    
        const requestBody = JSON.stringify({})
    
        dispatch({
            type: FETCH_PLAYER_DATA_FINISHED, 
            payload: getResponse('/admin/api/player/get', playerId, requestBody)
        })
    }
    
    const getResponse = async (url, playerId, request_body) => {
    
    
        const response = await fetch(url, {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
                'Authorization': 'Bearer xxxx-xxxx-xxxx-xxxxxxxxx',
                'PlayerID': playerId,
            },
    
            credentials: 'same-origin',
            body: request_body 
        })
    
        const response_body = await response.json()
        return response_body
    }
    
[/code]

reducer PlayerDataRedux.jsのコード

[code]

    const initialState = {
        fetchLoading: false,
        playerData: null,
    }
    
    export default (state = initialState, action) => {
        switch (action.type) {
            case FETCH_PLAYER_DATA_LOADING: 
                return {
                    ...state, 
                    fetchLoading: true,
                } 
            case FETCH_PLAYER_DATA_FINISHED: 
                return {
                    ...state,
                    playerData: action.payload,
                    fetchLoading: false,
                }
            default:
                return state
        }
    }
    
[/code]

container PlayerDataRedux.jsのコード

[code]

    import { connect } from 'react-redux'
    import * as Player from '../../actions/Player'
    import PlayerDataComponent from '../../components/Player/PlayerDataRedux'
    
    const mapStateToProps = state => ({
        playerData: state.PlayerDataRedux.playerData,
        fetchLoading: state.PlayerDataRedux.fetchLoading,
    })
    
    const mapDispatchToProps = dispatch => ({
        fetchPlayerData: playerId => Player.fetchPlayerData(dispatch, playerId),
    })
    
    export default connect(
        mapStateToProps,
        mapDispatchToProps,
    )(PlayerDataComponent)
    
[/code]


CC BY-SA 4.0
2020-05-25T10:05:32.013
66975
2020-05-26T05:27:05.377
2020-05-26T05:27:05.377
40324
40324
question
reactjs redux
React redux componentでglobal stateをinput値として使用していますがinputで入力できない